<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>Table 表格 | Vue DevUI</title>
    <meta name="description" content="Vue DevUI 组件库">
    <link rel="stylesheet" href="/assets/style.b884dd64.css">
    <link rel="modulepreload" href="/assets/Home.e734a50d.js">
    <link rel="modulepreload" href="/assets/AlgoliaSearchBox.e66f60b3.js">
    <link rel="modulepreload" href="/assets/app.43ba01c1.js">
    <link rel="modulepreload" href="/assets/components_table_index.md.1b34dab5.lean.js">
    <link rel="modulepreload" href="/assets/app.43ba01c1.js">
    <link rel="icon" type="image/svg+xml" href="/assets/logo.svg">
    <meta name="twitter:title" content="Table 表格 | Vue DevUI">
    <meta property="og:title" content="Table 表格 | Vue DevUI">
  </head>
  <body>
    <div id="app"><!--[--><div class="theme"><header class="nav-bar" data-v-4bb0db66><div class="nav-bar-inner" data-v-4bb0db66><div class="sidebar-button" data-v-4bb0db66><svg class="icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z" class></path></svg></div><a class="nav-bar-title" aria-label="Vue DevUI, back to home" data-v-4bb0db66 data-v-4d0f7fcc><img class="logo" src="/../../assets/logo.svg" alt="Logo" data-v-4d0f7fcc><span data-v-4d0f7fcc>Vue DevUI</span></a><!--[--><!--[--><div id="docsearch" multilang="false"></div><!--]--><!--]--><div class="flex-grow" data-v-4bb0db66></div><div class="flex items-center" data-v-4bb0db66><div class="nav" data-v-4bb0db66><nav class="nav-links" data-v-4bb0db66 data-v-5b7b1e24><!--[--><!-- <div v-for="item in theme.nav" :key="item.text" class="item"> --><!--[--><div class="item" data-v-5b7b1e24><div class="nav-link" data-v-5b7b1e24 data-v-53d6b5a1><a class="item" href="/quick-start/" data-v-53d6b5a1>组件 <!----></a></div></div><div class="item" data-v-5b7b1e24><div class="nav-link" data-v-5b7b1e24 data-v-53d6b5a1><a class="item" href="/contributing/" data-v-53d6b5a1>贡献指南 <!----></a></div></div><div class="item" data-v-5b7b1e24><div class="nav-link" data-v-5b7b1e24 data-v-53d6b5a1><a class="item isExternal" href="https://devcloudfe.github.io/devui-playground" target="_blank" rel="noopener noreferrer" data-v-53d6b5a1>Playground <svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-53d6b5a1><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div></div><div class="item" data-v-5b7b1e24><div class="nav-link" data-v-5b7b1e24 data-v-53d6b5a1><a class="item isExternal" href="https://github.com/DevCloudFE/vue-devui/releases/tag/v1.5.1" target="_blank" rel="noopener noreferrer" data-v-53d6b5a1>1.5.1 <svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-53d6b5a1><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div></div><div class="item" data-v-5b7b1e24><div class="nav-dropdown-link" data-v-5b7b1e24 data-v-40cec4b2><button class="button" data-v-40cec4b2><span class="button-text" data-v-40cec4b2>文档</span><span class="right button-arrow" data-v-40cec4b2></span></button><ul class="dialog" data-v-40cec4b2><!--[--><li class="dialog-item" data-v-40cec4b2><div class="nav-dropdown-link-item" data-v-40cec4b2 data-v-2a283218><a class="item isExternal" href="https://github.com/DevCloudFE/vue-devui/releases" target="_blank" rel="noopener noreferrer" data-v-2a283218><span class="arrow" data-v-2a283218></span><span class="text" data-v-2a283218>更新日志</span><span class="icon" data-v-2a283218><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-2a283218><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><li class="dialog-item" data-v-40cec4b2><div class="nav-dropdown-link-item" data-v-40cec4b2 data-v-2a283218><a class="item isExternal" href="https://devui.design/design-cn/start" target="_blank" rel="noopener noreferrer" data-v-2a283218><span class="arrow" data-v-2a283218></span><span class="text" data-v-2a283218>设计规范</span><span class="icon" data-v-2a283218><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-2a283218><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><!--]--></ul></div></div><div class="item" data-v-5b7b1e24><div class="nav-dropdown-link" data-v-5b7b1e24 data-v-40cec4b2><button class="button" data-v-40cec4b2><span class="button-text" data-v-40cec4b2>生态</span><span class="right button-arrow" data-v-40cec4b2></span></button><ul class="dialog" data-v-40cec4b2><!--[--><li class="dialog-item" data-v-40cec4b2><div class="nav-dropdown-link-item" data-v-40cec4b2 data-v-2a283218><a class="item isExternal" href="https://devui.design/" target="_blank" rel="noopener noreferrer" data-v-2a283218><span class="arrow" data-v-2a283218></span><span class="text" data-v-2a283218>Ng DevUI</span><span class="icon" data-v-2a283218><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-2a283218><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><li class="dialog-item" data-v-40cec4b2><div class="nav-dropdown-link-item" data-v-40cec4b2 data-v-2a283218><a class="item isExternal" href="https://devui.design/admin-page/home" target="_blank" rel="noopener noreferrer" data-v-2a283218><span class="arrow" data-v-2a283218></span><span class="text" data-v-2a283218>Ng DevUI Admin</span><span class="icon" data-v-2a283218><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-2a283218><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><li class="dialog-item" data-v-40cec4b2><div class="nav-dropdown-link-item" data-v-40cec4b2 data-v-2a283218><a class="item isExternal" href="https://react-devui.surge.sh/" target="_blank" rel="noopener noreferrer" data-v-2a283218><span class="arrow" data-v-2a283218></span><span class="text" data-v-2a283218>React DevUI</span><span class="icon" data-v-2a283218><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-2a283218><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><li class="dialog-item" data-v-40cec4b2><div class="nav-dropdown-link-item" data-v-40cec4b2 data-v-2a283218><a class="item isExternal" href="https://github.com/DevCloudFE/DevUIHelper" target="_blank" rel="noopener noreferrer" data-v-2a283218><span class="arrow" data-v-2a283218></span><span class="text" data-v-2a283218>DevUI Helper</span><span class="icon" data-v-2a283218><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-2a283218><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><li class="dialog-item" data-v-40cec4b2><div class="nav-dropdown-link-item" data-v-40cec4b2 data-v-2a283218><a class="item isExternal" href="https://github.com/DevCloudFE/devui-playground" target="_blank" rel="noopener noreferrer" data-v-2a283218><span class="arrow" data-v-2a283218></span><span class="text" data-v-2a283218>DevUI Playground</span><span class="icon" data-v-2a283218><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-2a283218><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><li class="dialog-item" data-v-40cec4b2><div class="nav-dropdown-link-item" data-v-40cec4b2 data-v-2a283218><a class="item isExternal" href="https://devui.design/icon/ruleResource" target="_blank" rel="noopener noreferrer" data-v-2a283218><span class="arrow" data-v-2a283218></span><span class="text" data-v-2a283218>图标库</span><span class="icon" data-v-2a283218><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-2a283218><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><!--]--></ul></div></div><!--]--><!--]--><!----><!----></nav></div><div class="custom-nav flex items-center ml-l" data-v-4bb0db66><!----><!----><div class="custom-nav-item flex items-center ml-m" data-v-4bb0db66><!--[--><span class="devui-popper-trigger"><svg class="icon-theme" viewbox="0 0 1024 1024" width="16" height="16" data-v-6fec2a10><path fill="var(--devui-text)" d="M512 96C229.696 96 0 325.696 0 608c0 90.368 30.304 174.496 85.344 236.896 55.264 62.624 129.152 97.12 208.128 97.12 81.568 0 161.536-36.832 231.264-106.592l2.272-2.496c65.792-81.472 132.896-121.056 205.088-121.056 46.72 0 89.216 15.872 126.688 29.92 30.336 11.328 56.576 21.12 81.216 21.12C1024 762.912 1024 654.336 1024 608c0-282.304-229.696-512-512-512z m428 602.912c-13.088 0-35.296-8.288-58.784-17.088-40.48-15.136-90.848-33.952-149.12-33.952-92.352 0-175.328 46.944-253.76 143.456-57.184 56.704-121.056 86.688-184.832 86.688-60.352 0-117.216-26.784-160.128-75.456C88.64 751.872 64 682.784 64 608 64 360.96 264.96 160 512 160s448 200.96 448 448c0 27.328-1.952 90.912-20 90.912z m-203.296-182.848a64 64 0 1 0 128 0 64 64 0 1 0-128 0z m-343.68-202.688a64 64 0 1 0 128 0 64 64 0 1 0-128 0z m215.68 26.688a64 64 0 1 0 128 0 64 64 0 1 0-128 0z m-381.312 112a64 64 0 1 0 128 0 64 64 0 1 0-128 0zM182.4 698.752a96 96 0 1 0 192 0 96 96 0 1 0-192 0z" data-v-6fec2a10></path></svg></span><!--teleport start--><!--teleport end--><!--]--></div><a class="custom-nav-item ml-m" style="font-size:0;user-select:none;" href="https://github.com/DevCloudFE/vue-devui" target="_blank" data-v-4bb0db66><svg viewBox="0 0 20 20" width="18" height="18" data-v-4bb0db66><path fill="var(--devui-text, #252b3a)" d="M10 0a10 10 0 0 0-3.16 19.49c.5.1.68-.22.68-.48l-.01-1.7c-2.78.6-3.37-1.34-3.37-1.34-.46-1.16-1.11-1.47-1.11-1.47-.9-.62.07-.6.07-.6 1 .07 1.53 1.03 1.53 1.03.9 1.52 2.34 1.08 2.91.83.1-.65.35-1.09.63-1.34-2.22-.25-4.55-1.11-4.55-4.94 0-1.1.39-1.99 1.03-2.69a3.6 3.6 0 0 1 .1-2.64s.84-.27 2.75 1.02a9.58 9.58 0 0 1 5 0c1.91-1.3 2.75-1.02 2.75-1.02.55 1.37.2 2.4.1 2.64.64.7 1.03 1.6 1.03 2.69 0 3.84-2.34 4.68-4.57 4.93.36.31.68.92.68 1.85l-.01 2.75c0 .26.18.58.69.48A10 10 0 0 0 10 0" data-v-4bb0db66></path></svg></a></div></div></div></header><aside class="sidebar" data-v-06a2164a><nav class="nav-links nav" data-v-06a2164a data-v-5b7b1e24><!--[--><!-- <div v-for="item in theme.nav" :key="item.text" class="item"> --><!--[--><div class="item" data-v-5b7b1e24><div class="nav-link" data-v-5b7b1e24 data-v-53d6b5a1><a class="item" href="/quick-start/" data-v-53d6b5a1>组件 <!----></a></div></div><div class="item" data-v-5b7b1e24><div class="nav-link" data-v-5b7b1e24 data-v-53d6b5a1><a class="item" href="/contributing/" data-v-53d6b5a1>贡献指南 <!----></a></div></div><div class="item" data-v-5b7b1e24><div class="nav-link" data-v-5b7b1e24 data-v-53d6b5a1><a class="item isExternal" href="https://devcloudfe.github.io/devui-playground" target="_blank" rel="noopener noreferrer" data-v-53d6b5a1>Playground <svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-53d6b5a1><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div></div><div class="item" data-v-5b7b1e24><div class="nav-link" data-v-5b7b1e24 data-v-53d6b5a1><a class="item isExternal" href="https://github.com/DevCloudFE/vue-devui/releases/tag/v1.5.1" target="_blank" rel="noopener noreferrer" data-v-53d6b5a1>1.5.1 <svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-53d6b5a1><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div></div><div class="item" data-v-5b7b1e24><div class="nav-dropdown-link" data-v-5b7b1e24 data-v-40cec4b2><button class="button" data-v-40cec4b2><span class="button-text" data-v-40cec4b2>文档</span><span class="right button-arrow" data-v-40cec4b2></span></button><ul class="dialog" data-v-40cec4b2><!--[--><li class="dialog-item" data-v-40cec4b2><div class="nav-dropdown-link-item" data-v-40cec4b2 data-v-2a283218><a class="item isExternal" href="https://github.com/DevCloudFE/vue-devui/releases" target="_blank" rel="noopener noreferrer" data-v-2a283218><span class="arrow" data-v-2a283218></span><span class="text" data-v-2a283218>更新日志</span><span class="icon" data-v-2a283218><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-2a283218><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><li class="dialog-item" data-v-40cec4b2><div class="nav-dropdown-link-item" data-v-40cec4b2 data-v-2a283218><a class="item isExternal" href="https://devui.design/design-cn/start" target="_blank" rel="noopener noreferrer" data-v-2a283218><span class="arrow" data-v-2a283218></span><span class="text" data-v-2a283218>设计规范</span><span class="icon" data-v-2a283218><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-2a283218><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><!--]--></ul></div></div><div class="item" data-v-5b7b1e24><div class="nav-dropdown-link" data-v-5b7b1e24 data-v-40cec4b2><button class="button" data-v-40cec4b2><span class="button-text" data-v-40cec4b2>生态</span><span class="right button-arrow" data-v-40cec4b2></span></button><ul class="dialog" data-v-40cec4b2><!--[--><li class="dialog-item" data-v-40cec4b2><div class="nav-dropdown-link-item" data-v-40cec4b2 data-v-2a283218><a class="item isExternal" href="https://devui.design/" target="_blank" rel="noopener noreferrer" data-v-2a283218><span class="arrow" data-v-2a283218></span><span class="text" data-v-2a283218>Ng DevUI</span><span class="icon" data-v-2a283218><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-2a283218><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><li class="dialog-item" data-v-40cec4b2><div class="nav-dropdown-link-item" data-v-40cec4b2 data-v-2a283218><a class="item isExternal" href="https://devui.design/admin-page/home" target="_blank" rel="noopener noreferrer" data-v-2a283218><span class="arrow" data-v-2a283218></span><span class="text" data-v-2a283218>Ng DevUI Admin</span><span class="icon" data-v-2a283218><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-2a283218><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><li class="dialog-item" data-v-40cec4b2><div class="nav-dropdown-link-item" data-v-40cec4b2 data-v-2a283218><a class="item isExternal" href="https://react-devui.surge.sh/" target="_blank" rel="noopener noreferrer" data-v-2a283218><span class="arrow" data-v-2a283218></span><span class="text" data-v-2a283218>React DevUI</span><span class="icon" data-v-2a283218><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-2a283218><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><li class="dialog-item" data-v-40cec4b2><div class="nav-dropdown-link-item" data-v-40cec4b2 data-v-2a283218><a class="item isExternal" href="https://github.com/DevCloudFE/DevUIHelper" target="_blank" rel="noopener noreferrer" data-v-2a283218><span class="arrow" data-v-2a283218></span><span class="text" data-v-2a283218>DevUI Helper</span><span class="icon" data-v-2a283218><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-2a283218><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><li class="dialog-item" data-v-40cec4b2><div class="nav-dropdown-link-item" data-v-40cec4b2 data-v-2a283218><a class="item isExternal" href="https://github.com/DevCloudFE/devui-playground" target="_blank" rel="noopener noreferrer" data-v-2a283218><span class="arrow" data-v-2a283218></span><span class="text" data-v-2a283218>DevUI Playground</span><span class="icon" data-v-2a283218><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-2a283218><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><li class="dialog-item" data-v-40cec4b2><div class="nav-dropdown-link-item" data-v-40cec4b2 data-v-2a283218><a class="item isExternal" href="https://devui.design/icon/ruleResource" target="_blank" rel="noopener noreferrer" data-v-2a283218><span class="arrow" data-v-2a283218></span><span class="text" data-v-2a283218>图标库</span><span class="icon" data-v-2a283218><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-2a283218><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><!--]--></ul></div></div><!--]--><!--]--><!----><!----></nav><!--[--><!--]--><ul class="sidebar-links" data-v-06a2164a><!--[--><li class="sidebar-link"><a class="sidebar-link-item" href="/quick-start/"><!----><span class="sidebar-link-text">快速开始<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/on-demand/"><!----><span class="sidebar-link-text">按需引入<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/theme-guide/"><!----><span class="sidebar-link-text">主题定制<!----></span></a><!----></li><li class="sidebar-link"><p class="sidebar-link-item"><!----><span class="sidebar-link-text">通用<!----></span></p><ul class="sidebar-links"><li class="sidebar-link"><a class="sidebar-link-item" href="/components/button/"><!----><span class="sidebar-link-text">Button 按钮<!----></span></a><!----></li><!----><li class="sidebar-link"><a class="sidebar-link-item" href="/components/fullscreen/"><!----><span class="sidebar-link-text">Fullscreen 全屏<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/icon/"><!----><span class="sidebar-link-text">Icon 图标<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/overlay/"><!----><span class="sidebar-link-text">Overlay 遮罩层<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/panel/"><!----><span class="sidebar-link-text">Panel 面板<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/ripple/"><!----><span class="sidebar-link-text">Ripple 水波纹<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/search/"><!----><span class="sidebar-link-text">Search 搜索框<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/status/"><!----><span class="sidebar-link-text">Status 状态<!----></span></a><!----></li><!----><!----></ul></li><li class="sidebar-link"><p class="sidebar-link-item"><!----><span class="sidebar-link-text">导航<!----></span></p><ul class="sidebar-links"><!----><!----><!----><!----><li class="sidebar-link"><a class="sidebar-link-item" href="/components/dropdown/"><!----><span class="sidebar-link-text">Dropdown 下拉菜单<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/menu/"><!----><span class="sidebar-link-text">Menu 菜单<!----></span></a><!----></li><!----><li class="sidebar-link"><a class="sidebar-link-item" href="/components/pagination/"><!----><span class="sidebar-link-text">Pagination 分页<!----></span></a><!----></li><!----><li class="sidebar-link"><a class="sidebar-link-item" href="/components/tabs/"><!----><span class="sidebar-link-text">Tabs 选项卡<!----></span></a><!----></li></ul></li><li class="sidebar-link"><p class="sidebar-link-item"><!----><span class="sidebar-link-text">反馈<!----></span></p><ul class="sidebar-links"><li class="sidebar-link"><a class="sidebar-link-item" href="/components/alert/"><!----><span class="sidebar-link-text">Alert 警告<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/drawer/"><!----><span class="sidebar-link-text">Drawer 抽屉板<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/loading/"><!----><span class="sidebar-link-text">Loading 加载提示<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/message/"><!----><span class="sidebar-link-text">Message 全局提示<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/modal/"><!----><span class="sidebar-link-text">Modal 弹窗<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/notification/"><!----><span class="sidebar-link-text">Notification 全局通知<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/popover/"><!----><span class="sidebar-link-text">Popover 悬浮提示<!----></span></a><!----></li><!----><li class="sidebar-link"><a class="sidebar-link-item" href="/components/result/"><!----><span class="sidebar-link-text">Result 结果<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/tooltip/"><!----><span class="sidebar-link-text">Tooltip 提示<!----></span></a><!----></li></ul></li><li class="sidebar-link"><p class="sidebar-link-item"><!----><span class="sidebar-link-text">数据录入<!----></span></p><ul class="sidebar-links"><li class="sidebar-link"><a class="sidebar-link-item" href="/components/auto-complete/"><!----><span class="sidebar-link-text">AutoComplete 自动补全<!----></span></a><!----></li><!----><li class="sidebar-link"><a class="sidebar-link-item" href="/components/checkbox/"><!----><span class="sidebar-link-text">Checkbox 复选框<!----></span></a><!----></li><!----><!----><li class="sidebar-link"><a class="sidebar-link-item" href="/components/date-picker-pro/"><!----><span class="sidebar-link-text">DatePickerPro 日期选择器<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/editable-select/"><!----><span class="sidebar-link-text">EditableSelect 可输入下拉选择框<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/form/"><!----><span class="sidebar-link-text">Form 表单<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/input/"><!----><span class="sidebar-link-text">Input 输入框<!----></span></a><!----></li><!----><li class="sidebar-link"><a class="sidebar-link-item" href="/components/input-number/"><!----><span class="sidebar-link-text">InputNumber 数字输入框<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/mention/"><!----><span class="sidebar-link-text">Mention 提及<!----></span></a><!----></li><!----><li class="sidebar-link"><a class="sidebar-link-item" href="/components/radio/"><!----><span class="sidebar-link-text">Radio 单选框<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/select/"><!----><span class="sidebar-link-text">Select 下拉框<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/slider/"><!----><span class="sidebar-link-text">Slider 滑块<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/switch/"><!----><span class="sidebar-link-text">Switch 开关<!----></span></a><!----></li><!----><li class="sidebar-link"><a class="sidebar-link-item" href="/components/textarea/"><!----><span class="sidebar-link-text">Textarea 多行文本框<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/time-picker/"><!----><span class="sidebar-link-text">TimePicker 时间选择器<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/time-select/"><!----><span class="sidebar-link-text">TimeSelect 时间选择器<!----></span></a><!----></li><!----><!----><li class="sidebar-link"><a class="sidebar-link-item" href="/components/upload/"><!----><span class="sidebar-link-text">Upload 上传<!----></span></a><!----></li></ul></li><li class="sidebar-link"><p class="sidebar-link-item"><!----><span class="sidebar-link-text">数据展示<!----></span></p><ul class="sidebar-links"><li class="sidebar-link"><a class="sidebar-link-item" href="/components/avatar/"><!----><span class="sidebar-link-text">Avatar 头像<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/badge/"><!----><span class="sidebar-link-text">Badge 徽标<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/card/"><!----><span class="sidebar-link-text">Card 卡片<!----></span></a><!----></li><!----><li class="sidebar-link"><a class="sidebar-link-item" href="/components/collapse/"><!----><span class="sidebar-link-text">Collapse 折叠面板<!----></span></a><!----></li><!----><li class="sidebar-link"><a class="sidebar-link-item" href="/components/countdown/"><!----><span class="sidebar-link-text">Countdown 倒计时<!----></span></a><!----></li><!----><li class="sidebar-link"><a class="sidebar-link-item" href="/components/image-preview/"><!----><span class="sidebar-link-text">ImagePreview 图片预览<!----></span></a><!----></li><!----><li class="sidebar-link"><a class="sidebar-link-item" href="/components/progress/"><!----><span class="sidebar-link-text">Progress 进度条<!----></span></a><!----></li><!----><li class="sidebar-link"><a class="sidebar-link-item" href="/components/rate/"><!----><span class="sidebar-link-text">Rate 评分<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/skeleton/"><!----><span class="sidebar-link-text">Skeleton 骨架屏<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/statistic/"><!----><span class="sidebar-link-text">Statistic 统计数值<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/steps/"><!----><span class="sidebar-link-text">Steps 步骤条<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item active" href="/components/table/"><!----><span class="sidebar-link-text">Table 表格<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/tag/"><!----><span class="sidebar-link-text">Tag 标签<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/timeline/"><!----><span class="sidebar-link-text">Timeline 时间轴<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/tree/"><!----><span class="sidebar-link-text">Tree 树<!----></span></a><!----></li></ul></li><li class="sidebar-link"><p class="sidebar-link-item"><!----><span class="sidebar-link-text">布局<!----></span></p><ul class="sidebar-links"><li class="sidebar-link"><a class="sidebar-link-item" href="/components/grid/"><!----><span class="sidebar-link-text">Grid 栅格<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/layout/"><!----><span class="sidebar-link-text">Layout 布局<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/splitter/"><!----><span class="sidebar-link-text">Splitter 分割器<!----></span></a><!----></li></ul></li><!--]--></ul><!--[--><!--]--></aside><!-- TODO: make this button accessible --><div class="sidebar-mask"></div><main class="page" data-v-35e0cb6b><div class="container" data-v-35e0cb6b><!--[--><!--]--><div style="position:relative;" class="content" data-v-35e0cb6b><div><h1 id="table-表格" tabindex="-1">Table 表格 <a class="header-anchor" href="#table-表格" aria-hidden="true">#</a></h1><p>展示行列数据。</p><h4 id="何时使用" tabindex="-1">何时使用 <a class="header-anchor" href="#何时使用" aria-hidden="true">#</a></h4><ol><li>当有大量结构化的数据需要展现时；</li><li>当需要对数据进行排序、过滤、自定义操作等复杂行为时。</li></ol><h3 id="基本用法" tabindex="-1">基本用法 <a class="header-anchor" href="#基本用法" aria-hidden="true">#</a></h3><div class="demo-block demo-index" data-v-2b1aa91d><!--[--><div class="source" data-v-2b1aa91d><!--[--><div><div class="devui-table" style="width:100%;"><div class="devui-table__container"><div class="hidden-columns"><!--[--><div><div></div></div><div><div></div></div><div><div></div></div><div><div></div></div><!--]--></div><table class="devui-table__view devui-table--sm" cellpadding="0" cellspacing="0"><colgroup><!--[--><!--]--></colgroup><thead class="devui-table__thead" style="position:relative;"><!--[--><tr><!--[--><!--]--></tr><!--]--></thead><tbody class="devui-table__tbody"><!--[--><!--]--><!----></tbody></table><!----></div></div></div><!--]--></div><div class="meta" data-v-2b1aa91d><div class="description" data-v-2b1aa91d><!--[--><div>简单表格，<code>d-table</code>组件上的<code>data</code>属性传入要展示的数据，<code>d-column</code>组件上通过<code>field</code>传入对应列内容的字段名，<code>header</code>传入对应列的标题。</div><!--]--></div><div class="highlight" data-v-2b1aa91d><!--[--><div class="language-vue"><pre><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-table</span> <span class="token attr-name">:data</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>baseTableData<span class="token punctuation">&quot;</span></span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token value css language-css"><span class="token property">width</span><span class="token punctuation">:</span> 100%</span><span class="token punctuation">&quot;</span></span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-column</span> <span class="token attr-name">field</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>firstName<span class="token punctuation">&quot;</span></span> <span class="token attr-name">header</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>First Name<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-column</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-column</span> <span class="token attr-name">field</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>lastName<span class="token punctuation">&quot;</span></span> <span class="token attr-name">header</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Last Name<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-column</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-column</span> <span class="token attr-name">field</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>gender<span class="token punctuation">&quot;</span></span> <span class="token attr-name">header</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Gender<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-column</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-column</span> <span class="token attr-name">field</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>date<span class="token punctuation">&quot;</span></span> <span class="token attr-name">header</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Date of birth<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-column</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-table</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
<span class="token keyword">import</span> <span class="token punctuation">{</span> defineComponent<span class="token punctuation">,</span> ref <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;vue&#39;</span><span class="token punctuation">;</span>

<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token function">defineComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  <span class="token function">setup</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">const</span> baseTableData <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token punctuation">[</span>
      <span class="token punctuation">{</span>
        <span class="token literal-property property">firstName</span><span class="token operator">:</span> <span class="token string">&#39;Mark&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">lastName</span><span class="token operator">:</span> <span class="token string">&#39;Otto&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">date</span><span class="token operator">:</span> <span class="token string">&#39;1990/01/11&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">gender</span><span class="token operator">:</span> <span class="token string">&#39;Male&#39;</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">{</span>
        <span class="token literal-property property">firstName</span><span class="token operator">:</span> <span class="token string">&#39;Jacob&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">lastName</span><span class="token operator">:</span> <span class="token string">&#39;Thornton&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">gender</span><span class="token operator">:</span> <span class="token string">&#39;Female&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">date</span><span class="token operator">:</span> <span class="token string">&#39;1990/01/12&#39;</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">{</span>
        <span class="token literal-property property">firstName</span><span class="token operator">:</span> <span class="token string">&#39;Danni&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">lastName</span><span class="token operator">:</span> <span class="token string">&#39;Chen&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">gender</span><span class="token operator">:</span> <span class="token string">&#39;Male&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">date</span><span class="token operator">:</span> <span class="token string">&#39;1990/01/13&#39;</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">{</span>
        <span class="token literal-property property">firstName</span><span class="token operator">:</span> <span class="token string">&#39;green&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">lastName</span><span class="token operator">:</span> <span class="token string">&#39;gerong&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">gender</span><span class="token operator">:</span> <span class="token string">&#39;Male&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">date</span><span class="token operator">:</span> <span class="token string">&#39;1990/01/14&#39;</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

    <span class="token keyword">return</span> <span class="token punctuation">{</span> baseTableData <span class="token punctuation">}</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><!--]--></div></div><!--]--><div class="demo-block-control" data-v-2b1aa91d><i class="control-icon icon-caret-down" data-v-2b1aa91d></i><span style="display:none;" class="control-text" data-v-2b1aa91d>显示代码</span><div class="control-button-wrap" data-v-2b1aa91d><span style="display:none;" class="control-button copy-button" data-v-2b1aa91d>复制代码片段</span></div></div></div><h3 id="表格样式" tabindex="-1">表格样式 <a class="header-anchor" href="#表格样式" aria-hidden="true">#</a></h3><div class="demo-block demo-index" data-v-2b1aa91d><!--[--><div class="source" data-v-2b1aa91d><!--[--><div><div class="table-btn-groups mb-2"><div class="table-btn mb-1"> 自动表格布局： <div class="devui-switch devui-switch--md"><span class="devui-switch__wrapper" style="background:;border-color:;"><span class="devui-switch__inner-wrapper"><div class="devui-switch__inner"><!--[--><!--]--></div></span><small></small></span></div></div><div class="table-btn mb-1"> 斑马纹： <div class="devui-switch devui-switch--md"><span class="devui-switch__wrapper" style="background:;border-color:;"><span class="devui-switch__inner-wrapper"><div class="devui-switch__inner"><!--[--><!--]--></div></span><small></small></span></div></div><div class="table-btn mb-1"> 表头背景色： <div class="devui-switch devui-switch--md"><span class="devui-switch__wrapper" style="background:;border-color:;"><span class="devui-switch__inner-wrapper"><div class="devui-switch__inner"><!--[--><!--]--></div></span><small></small></span></div></div><div class="table-btn mb-1"> 表格大小： <div class="devui-radio-group is-row"><!--[--><!--[--><div class="devui-radio__wrapper"><label class="active devui-radio devui-radio--md"><input type="radio" class="devui-radio__input" value="sm" checked><span class="devui-radio__material"><svg height="100%" width="100%" viewbox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"><circle class="devui-radio__material-outer" cx="512" cy="512" r="486.5" stroke-width="51"></circle><circle class="devui-radio__material-inner" cx="512" fill-rule="nonzero" cy="512" r="320"></circle></svg></span><span class="devui-radio__label"><!--[-->Normal<!--]--></span></label></div><div class="devui-radio__wrapper"><label class="devui-radio devui-radio--md"><input type="radio" class="devui-radio__input" value="md"><span class="devui-radio__material"><svg height="100%" width="100%" viewbox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"><circle class="devui-radio__material-outer" cx="512" cy="512" r="486.5" stroke-width="51"></circle><circle class="devui-radio__material-inner" cx="512" fill-rule="nonzero" cy="512" r="320"></circle></svg></span><span class="devui-radio__label"><!--[-->Middle<!--]--></span></label></div><div class="devui-radio__wrapper"><label class="devui-radio devui-radio--md"><input type="radio" class="devui-radio__input" value="lg"><span class="devui-radio__material"><svg height="100%" width="100%" viewbox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"><circle class="devui-radio__material-outer" cx="512" cy="512" r="486.5" stroke-width="51"></circle><circle class="devui-radio__material-inner" cx="512" fill-rule="nonzero" cy="512" r="320"></circle></svg></span><span class="devui-radio__label"><!--[-->large<!--]--></span></label></div><!--]--><!--]--></div></div><div class="table-btn mb-1"> 表格边框： <div class="devui-radio-group is-row"><!--[--><!--[--><div class="devui-radio__wrapper"><label class="active devui-radio devui-radio--md"><input type="radio" class="devui-radio__input" value checked><span class="devui-radio__material"><svg height="100%" width="100%" viewbox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"><circle class="devui-radio__material-outer" cx="512" cy="512" r="486.5" stroke-width="51"></circle><circle class="devui-radio__material-inner" cx="512" fill-rule="nonzero" cy="512" r="320"></circle></svg></span><span class="devui-radio__label"><!--[-->Normal<!--]--></span></label></div><div class="devui-radio__wrapper"><label class="devui-radio devui-radio--md"><input type="radio" class="devui-radio__input" value="bordered"><span class="devui-radio__material"><svg height="100%" width="100%" viewbox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"><circle class="devui-radio__material-outer" cx="512" cy="512" r="486.5" stroke-width="51"></circle><circle class="devui-radio__material-inner" cx="512" fill-rule="nonzero" cy="512" r="320"></circle></svg></span><span class="devui-radio__label"><!--[-->Bordered<!--]--></span></label></div><div class="devui-radio__wrapper"><label class="devui-radio devui-radio--md"><input type="radio" class="devui-radio__input" value="borderless"><span class="devui-radio__material"><svg height="100%" width="100%" viewbox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"><circle class="devui-radio__material-outer" cx="512" cy="512" r="486.5" stroke-width="51"></circle><circle class="devui-radio__material-inner" cx="512" fill-rule="nonzero" cy="512" r="320"></circle></svg></span><span class="devui-radio__label"><!--[-->Borderless<!--]--></span></label></div><!--]--><!--]--></div></div><div class="table-btn mb-1"> 表头显隐： <div class="devui-switch devui-switch--md"><span class="devui-switch__wrapper devui-switch--checked" style="background:undefined;border-color:undefined;"><span class="devui-switch__inner-wrapper"><div class="devui-switch__inner"><!--[--><!--]--></div></span><small></small></span></div></div></div><div class="devui-table" style=""><div class="devui-table__container"><div class="hidden-columns"><!--[--><div><div></div></div><div><div></div></div><div><div></div></div><div><div></div></div><!--]--></div><table class="devui-table__view devui-table--sm" cellpadding="0" cellspacing="0"><colgroup><!--[--><!--]--></colgroup><thead class="devui-table__thead" style="position:relative;"><!--[--><tr><!--[--><!--]--></tr><!--]--></thead><tbody class="devui-table__tbody"><!--[--><!--]--><!----></tbody></table><!----></div></div></div><!--]--></div><div class="meta" data-v-2b1aa91d><div class="description" data-v-2b1aa91d><!--[--><div><code>table-layout</code>参数设置表格的布局方式，目前支持<code>fixed</code>和<code>auto</code>两种类型；<code>striped</code>参数设置是否显示斑马纹；<code>header-bg</code>参数设置是否显示表头背景色；<code>size</code>参数设置表格大小；<code>border-type</code>设置表格边框样式。</div><!--]--></div><div class="highlight" data-v-2b1aa91d><!--[--><div class="language-vue"><pre><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>table-btn-groups mb-2<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>table-btn mb-1<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
      自动表格布局：
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-switch</span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>tableLayout<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>table-btn mb-1<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
      斑马纹：
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-switch</span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>striped<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>table-btn mb-1<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
      表头背景色：
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-switch</span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>headerBg<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>table-btn mb-1<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
      表格大小：
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-radio-group</span> <span class="token attr-name">direction</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>row<span class="token punctuation">&quot;</span></span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>size<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-radio</span> <span class="token attr-name">v-for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>item in sizeList<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>item.label<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>item.value<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
          {{ item.label }}
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-radio</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-radio-group</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>table-btn mb-1<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
      表格边框：
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-radio-group</span> <span class="token attr-name">direction</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>row<span class="token punctuation">&quot;</span></span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>borderType<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-radio</span> <span class="token attr-name">v-for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>item in borderTypeList<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>item.label<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>item.value<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
          {{ item.label }}
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-radio</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-radio-group</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>table-btn mb-1<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
      表头显隐：
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-switch</span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>showHeader<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-table</span>
    <span class="token attr-name">:table-layout</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>tableLayout ? &#39;auto&#39; : &#39;fixed&#39;<span class="token punctuation">&quot;</span></span>
    <span class="token attr-name">:striped</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>striped<span class="token punctuation">&quot;</span></span>
    <span class="token attr-name">:header-bg</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>headerBg<span class="token punctuation">&quot;</span></span>
    <span class="token attr-name">:data</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>stripedTableData<span class="token punctuation">&quot;</span></span>
    <span class="token attr-name">:size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>size<span class="token punctuation">&quot;</span></span>
    <span class="token attr-name">:border-type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>borderType<span class="token punctuation">&quot;</span></span>
    <span class="token attr-name">:show-header</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>showHeader<span class="token punctuation">&quot;</span></span>
  <span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-column</span> <span class="token attr-name">field</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>firstName<span class="token punctuation">&quot;</span></span> <span class="token attr-name">header</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>First Name<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-column</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-column</span> <span class="token attr-name">field</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>lastName<span class="token punctuation">&quot;</span></span> <span class="token attr-name">header</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Last Name<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-column</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-column</span> <span class="token attr-name">field</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>gender<span class="token punctuation">&quot;</span></span> <span class="token attr-name">header</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Gender<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-column</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-column</span> <span class="token attr-name">field</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>date<span class="token punctuation">&quot;</span></span> <span class="token attr-name">header</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Date of birth<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-column</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-table</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
<span class="token keyword">import</span> <span class="token punctuation">{</span> defineComponent<span class="token punctuation">,</span> ref <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;vue&#39;</span><span class="token punctuation">;</span>

<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token function">defineComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  <span class="token function">setup</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">const</span> tableLayout <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token boolean">false</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">const</span> striped <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token boolean">false</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">const</span> headerBg <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token boolean">false</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">const</span> size <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token string">&#39;sm&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">const</span> borderType <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token string">&#39;&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">const</span> showHeader <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token boolean">true</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">const</span> sizeList <span class="token operator">=</span> <span class="token punctuation">[</span>
      <span class="token punctuation">{</span>
        <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;Normal&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">&#39;sm&#39;</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">{</span>
        <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;Middle&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">&#39;md&#39;</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">{</span>
        <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;large&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">&#39;lg&#39;</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">]</span><span class="token punctuation">;</span>
    <span class="token keyword">const</span> borderTypeList <span class="token operator">=</span> <span class="token punctuation">[</span>
      <span class="token punctuation">{</span>
        <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;Normal&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">&#39;&#39;</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">{</span>
        <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;Bordered&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">&#39;bordered&#39;</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">{</span>
        <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;Borderless&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">&#39;borderless&#39;</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">]</span><span class="token punctuation">;</span>
    <span class="token keyword">const</span> stripedTableData <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token punctuation">[</span>
      <span class="token punctuation">{</span>
        <span class="token literal-property property">firstName</span><span class="token operator">:</span> <span class="token string">&#39;Mark&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">lastName</span><span class="token operator">:</span> <span class="token string">&#39;Otto&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">date</span><span class="token operator">:</span> <span class="token string">&#39;1990/01/11&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">gender</span><span class="token operator">:</span> <span class="token string">&#39;Male&#39;</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">{</span>
        <span class="token literal-property property">firstName</span><span class="token operator">:</span> <span class="token string">&#39;Jacob&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">lastName</span><span class="token operator">:</span> <span class="token string">&#39;Thornton&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">gender</span><span class="token operator">:</span> <span class="token string">&#39;Female&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">date</span><span class="token operator">:</span> <span class="token string">&#39;1990/01/12&#39;</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">{</span>
        <span class="token literal-property property">firstName</span><span class="token operator">:</span> <span class="token string">&#39;Danni&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">lastName</span><span class="token operator">:</span> <span class="token string">&#39;Chen&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">gender</span><span class="token operator">:</span> <span class="token string">&#39;Male&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">date</span><span class="token operator">:</span> <span class="token string">&#39;1990/01/13&#39;</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">{</span>
        <span class="token literal-property property">firstName</span><span class="token operator">:</span> <span class="token string">&#39;green&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">lastName</span><span class="token operator">:</span> <span class="token string">&#39;gerong&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">gender</span><span class="token operator">:</span> <span class="token string">&#39;Male&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">date</span><span class="token operator">:</span> <span class="token string">&#39;1990/01/14&#39;</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

    <span class="token keyword">return</span> <span class="token punctuation">{</span>
      stripedTableData<span class="token punctuation">,</span>
      striped<span class="token punctuation">,</span>
      headerBg<span class="token punctuation">,</span>
      size<span class="token punctuation">,</span>
      sizeList<span class="token punctuation">,</span>
      borderType<span class="token punctuation">,</span>
      showHeader<span class="token punctuation">,</span>
      borderTypeList<span class="token punctuation">,</span>
      tableLayout<span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>scss<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token style"><span class="token language-css">
<span class="token selector">.table-btn-groups</span> <span class="token punctuation">{</span>
  <span class="token property">display</span><span class="token punctuation">:</span> flex<span class="token punctuation">;</span>
  <span class="token property">flex-wrap</span><span class="token punctuation">:</span> wrap<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.table-btn</span> <span class="token punctuation">{</span>
  <span class="token property">display</span><span class="token punctuation">:</span> flex<span class="token punctuation">;</span>
  <span class="token property">justify-content</span><span class="token punctuation">:</span> flex-start<span class="token punctuation">;</span>
  <span class="token property">align-items</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span>
  <span class="token property">margin-right</span><span class="token punctuation">:</span> 1rem<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><!--]--></div></div><!--]--><div class="demo-block-control" data-v-2b1aa91d><i class="control-icon icon-caret-down" data-v-2b1aa91d></i><span style="display:none;" class="control-text" data-v-2b1aa91d>显示代码</span><div class="control-button-wrap" data-v-2b1aa91d><span style="display:none;" class="control-button copy-button" data-v-2b1aa91d>复制代码片段</span></div></div></div><h3 id="表格交互" tabindex="-1">表格交互 <a class="header-anchor" href="#表格交互" aria-hidden="true">#</a></h3><div class="demo-block demo-index" data-v-2b1aa91d><!--[--><div class="source" data-v-2b1aa91d><!--[--><div><div><div class="mb-2"><button class="devui-button devui-button--outline devui-button--outline--secondary devui-button--md mr-1"><div class="loading-icon__container" style="display:none;"><div class="devui-icon__container devui-icon--no-slots button-icon-loading"><!----><i class="icon icon-loading button-icon-loading" style="font-size:inherit;color:#BBDEFB;transform:rotate(undefineddeg);"></i><!----></div></div><span class="button-content"><!--[-->Get CheckedRows<!--]--></span></button><button class="devui-button devui-button--outline devui-button--outline--secondary devui-button--md mr-1"><div class="loading-icon__container" style="display:none;"><div class="devui-icon__container devui-icon--no-slots button-icon-loading"><!----><i class="icon icon-loading button-icon-loading" style="font-size:inherit;color:#BBDEFB;transform:rotate(undefineddeg);"></i><!----></div></div><span class="button-content"><!--[-->Insert Row<!--]--></span></button><button class="devui-button devui-button--outline devui-button--outline--secondary devui-button--md mr-1"><div class="loading-icon__container" style="display:none;"><div class="devui-icon__container devui-icon--no-slots button-icon-loading"><!----><i class="icon icon-loading button-icon-loading" style="font-size:inherit;color:#BBDEFB;transform:rotate(undefineddeg);"></i><!----></div></div><span class="button-content"><!--[-->Delete Row<!--]--></span></button><button class="devui-button devui-button--outline devui-button--outline--secondary devui-button--md mr-1"><div class="loading-icon__container" style="display:none;"><div class="devui-icon__container devui-icon--no-slots button-icon-loading"><!----><i class="icon icon-loading button-icon-loading" style="font-size:inherit;color:#BBDEFB;transform:rotate(undefineddeg);"></i><!----></div></div><span class="button-content"><!--[-->Toggle Row<!--]--></span></button></div><div class="devui-table" style=""><div class="devui-table__container"><div class="hidden-columns"><!--[--><div><div></div></div><div><div></div></div><div><div></div></div><div><div></div></div><div><div></div></div><!--]--></div><table class="devui-table__view devui-table--sm" cellpadding="0" cellspacing="0"><colgroup><!--[--><!--]--></colgroup><thead class="devui-table__thead" style="position:relative;"><!--[--><tr><!--[--><!--]--></tr><!--]--></thead><tbody class="devui-table__tbody"><!--[--><!--]--><!----></tbody></table><!----></div></div></div></div><!--]--></div><div class="meta" data-v-2b1aa91d><div class="description" data-v-2b1aa91d><!--[--><div>通过添加一个<code>d-column</code>并且设置<code>type</code>属性为<code>checkable</code>即可实现表格的多选功能。<code>getCheckedRows</code>方法可以获取已选择的列表。<code>toggleRowSelection</code>方法可以切换某一行的选中状态。通过<code>cell-click</code>事件监听单元格点击，事件回调参数包含行索引、列索引、行数据、列数据。在列上配置<code>resizeable</code>属性，可实现该列拖动改变宽度，<code>min-width</code>和<code>max-width</code>设置可拖动范围，事件<code>resize-start</code>、<code>resizing</code>、<code>resize-end</code>分别在拖动开始时、进行中、结束后触发。</div><!--]--></div><div class="highlight" data-v-2b1aa91d><!--[--><div class="language-vue"><pre><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mb-2<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-button</span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>handleClick<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mr-1<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Get CheckedRows<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-button</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-button</span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>insertRow<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mr-1<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Insert Row<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-button</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-button</span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>deleteRow<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mr-1<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Delete Row<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-button</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-button</span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>toggleRow<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mr-1<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Toggle Row<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-button</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-table</span>
      <span class="token attr-name">ref</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>tableRef<span class="token punctuation">&quot;</span></span>
      <span class="token attr-name">:data</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>data<span class="token punctuation">&quot;</span></span>
      <span class="token attr-name">:row-key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>(item) =&gt; item.id<span class="token punctuation">&quot;</span></span>
      <span class="token attr-name">@cell-click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>onCellClick<span class="token punctuation">&quot;</span></span>
      <span class="token attr-name">@row-click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>onRowClick<span class="token punctuation">&quot;</span></span>
      <span class="token attr-name">@check-change</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>checkChange<span class="token punctuation">&quot;</span></span>
      <span class="token attr-name">@check-all-change</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>checkAllChange<span class="token punctuation">&quot;</span></span>
    <span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-column</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>checkable<span class="token punctuation">&quot;</span></span> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>40<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:checkable</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>checkable<span class="token punctuation">&quot;</span></span> <span class="token attr-name">reserve-check</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-column</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-column</span> <span class="token attr-name">field</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>firstName<span class="token punctuation">&quot;</span></span> <span class="token attr-name">header</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>First Name<span class="token punctuation">&quot;</span></span> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>200<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-column</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-column</span>
        <span class="token attr-name">field</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>lastName<span class="token punctuation">&quot;</span></span>
        <span class="token attr-name">header</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Last Name<span class="token punctuation">&quot;</span></span>
        <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>200<span class="token punctuation">&quot;</span></span>
        <span class="token attr-name">resizeable</span>
        <span class="token attr-name">min-width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>150<span class="token punctuation">&quot;</span></span>
        <span class="token attr-name">max-width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>250<span class="token punctuation">&quot;</span></span>
        <span class="token attr-name">@resize-start</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>onResizeStart<span class="token punctuation">&quot;</span></span>
        <span class="token attr-name">@resizing</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>onResizing<span class="token punctuation">&quot;</span></span>
        <span class="token attr-name">@resize-end</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>onResizeEnd<span class="token punctuation">&quot;</span></span>
      <span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-column</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-column</span> <span class="token attr-name">field</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>gender<span class="token punctuation">&quot;</span></span> <span class="token attr-name">header</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Gender<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-column</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-column</span> <span class="token attr-name">field</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>date<span class="token punctuation">&quot;</span></span> <span class="token attr-name">header</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Date of birth<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-column</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-table</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
<span class="token keyword">import</span> <span class="token punctuation">{</span> defineComponent<span class="token punctuation">,</span> ref <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;vue&#39;</span><span class="token punctuation">;</span>

<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token function">defineComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  <span class="token function">setup</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">const</span> tableRef <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">const</span> data <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token punctuation">[</span>
      <span class="token punctuation">{</span>
        <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token string">&#39;0&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">firstName</span><span class="token operator">:</span> <span class="token string">&#39;po&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">lastName</span><span class="token operator">:</span> <span class="token string">&#39;Lang&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">gender</span><span class="token operator">:</span> <span class="token string">&#39;Male&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">date</span><span class="token operator">:</span> <span class="token string">&#39;1990/01/15&#39;</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">{</span>
        <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token string">&#39;1&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">firstName</span><span class="token operator">:</span> <span class="token string">&#39;john&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">lastName</span><span class="token operator">:</span> <span class="token string">&#39;Li&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">gender</span><span class="token operator">:</span> <span class="token string">&#39;Female&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">date</span><span class="token operator">:</span> <span class="token string">&#39;1990/01/16&#39;</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">{</span>
        <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token string">&#39;2&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">firstName</span><span class="token operator">:</span> <span class="token string">&#39;peng&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">lastName</span><span class="token operator">:</span> <span class="token string">&#39;Li&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">gender</span><span class="token operator">:</span> <span class="token string">&#39;Male&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">date</span><span class="token operator">:</span> <span class="token string">&#39;1990/01/17&#39;</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">{</span>
        <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token string">&#39;3&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">firstName</span><span class="token operator">:</span> <span class="token string">&#39;Dale&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">lastName</span><span class="token operator">:</span> <span class="token string">&#39;Yu&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">gender</span><span class="token operator">:</span> <span class="token string">&#39;Female&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">date</span><span class="token operator">:</span> <span class="token string">&#39;1990/01/18&#39;</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">const</span> <span class="token function-variable function">handleClick</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
      console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>tableRef<span class="token punctuation">.</span>value<span class="token punctuation">.</span>store<span class="token punctuation">.</span><span class="token function">getCheckedRows</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">;</span>
    <span class="token keyword">const</span> <span class="token function-variable function">onCellClick</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">params</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
      console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&#39;cell-click&#39;</span><span class="token punctuation">,</span> params<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">;</span>
    <span class="token keyword">const</span> <span class="token function-variable function">onRowClick</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">params</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
      console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&#39;row-click&#39;</span><span class="token punctuation">,</span> params<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">;</span>

    <span class="token keyword">const</span> <span class="token function-variable function">checkChange</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">checked<span class="token punctuation">,</span> row<span class="token punctuation">,</span> selection</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
      console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&#39;checked row:&#39;</span><span class="token punctuation">,</span> checked<span class="token punctuation">,</span> row<span class="token punctuation">,</span> selection<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">;</span>

    <span class="token keyword">const</span> <span class="token function-variable function">checkAllChange</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">checked<span class="token punctuation">,</span> selection</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
      console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&#39;checked:&#39;</span><span class="token punctuation">,</span> checked<span class="token punctuation">,</span> selection<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">;</span>

    <span class="token keyword">const</span> <span class="token function-variable function">toggleRow</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
      tableRef<span class="token punctuation">.</span>value<span class="token punctuation">.</span>store<span class="token punctuation">.</span><span class="token function">toggleRowSelection</span><span class="token punctuation">(</span>data<span class="token punctuation">.</span>value<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">;</span>

    <span class="token keyword">const</span> <span class="token function-variable function">checkable</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">row<span class="token punctuation">,</span> rowIndex</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
      <span class="token keyword">return</span> row<span class="token punctuation">.</span>lastName <span class="token operator">===</span> <span class="token string">&#39;Li&#39;</span> <span class="token operator">||</span> <span class="token boolean">false</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">;</span>

    <span class="token keyword">const</span> <span class="token function-variable function">insertRow</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
      data<span class="token punctuation">.</span>value<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
        <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>data<span class="token punctuation">.</span>value<span class="token punctuation">.</span>length<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">,</span>
        <span class="token literal-property property">firstName</span><span class="token operator">:</span> <span class="token string">&#39;Jeff&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">lastName</span><span class="token operator">:</span> <span class="token string">&#39;You&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">gender</span><span class="token operator">:</span> <span class="token string">&#39;Male&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">date</span><span class="token operator">:</span> <span class="token string">&#39;1989/05/19&#39;</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">;</span>

    <span class="token keyword">const</span> <span class="token function-variable function">deleteRow</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
      data<span class="token punctuation">.</span>value<span class="token punctuation">.</span><span class="token function">splice</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">;</span>

    <span class="token keyword">const</span> <span class="token function-variable function">onResizeStart</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">e</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
      console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&#39;resize start&#39;</span><span class="token punctuation">,</span> e<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">;</span>

    <span class="token keyword">const</span> <span class="token function-variable function">onResizing</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">e</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
      console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&#39;resizing&#39;</span><span class="token punctuation">,</span> e<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">;</span>

    <span class="token keyword">const</span> <span class="token function-variable function">onResizeEnd</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">e</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
      console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&#39;resize end&#39;</span><span class="token punctuation">,</span> e<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">;</span>

    <span class="token keyword">return</span> <span class="token punctuation">{</span>
      tableRef<span class="token punctuation">,</span>
      data<span class="token punctuation">,</span>
      handleClick<span class="token punctuation">,</span>
      onCellClick<span class="token punctuation">,</span>
      onRowClick<span class="token punctuation">,</span>
      checkChange<span class="token punctuation">,</span>
      checkAllChange<span class="token punctuation">,</span>
      checkable<span class="token punctuation">,</span>
      insertRow<span class="token punctuation">,</span>
      deleteRow<span class="token punctuation">,</span>
      onResizeStart<span class="token punctuation">,</span>
      onResizing<span class="token punctuation">,</span>
      onResizeEnd<span class="token punctuation">,</span>
      toggleRow<span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><!--]--></div></div><!--]--><div class="demo-block-control" data-v-2b1aa91d><i class="control-icon icon-caret-down" data-v-2b1aa91d></i><span style="display:none;" class="control-text" data-v-2b1aa91d>显示代码</span><div class="control-button-wrap" data-v-2b1aa91d><span style="display:none;" class="control-button copy-button" data-v-2b1aa91d>复制代码片段</span></div></div></div><h3 id="索引列" tabindex="-1">索引列 <a class="header-anchor" href="#索引列" aria-hidden="true">#</a></h3><div class="demo-block demo-index" data-v-2b1aa91d><!--[--><div class="source" data-v-2b1aa91d><!--[--><div><div><div class="devui-table" style=""><div class="devui-table__container"><div class="hidden-columns"><!--[--><div><div></div></div><div><div></div></div><div><div></div></div><div><div></div></div><div><div></div></div><!--]--></div><table class="devui-table__view devui-table--sm" cellpadding="0" cellspacing="0"><colgroup><!--[--><!--]--></colgroup><thead class="devui-table__thead" style="position:relative;"><!--[--><tr><!--[--><!--]--></tr><!--]--></thead><tbody class="devui-table__tbody"><!--[--><!--]--><!----></tbody></table><!----></div></div></div></div><!--]--></div><div class="meta" data-v-2b1aa91d><div class="description" data-v-2b1aa91d><!--[--><div>通过添加一个<code>d-column</code>并且设置<code>type</code>参数为<code>index</code>即可给表格添加索引。索引列的表头默认展示<code>#</code>，可通过<code>header</code>参数传入指定内容。</div><!--]--></div><div class="highlight" data-v-2b1aa91d><!--[--><div class="language-vue"><pre><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-table</span> <span class="token attr-name">:data</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>data<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-column</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>index<span class="token punctuation">&quot;</span></span> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>40<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-column</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-column</span> <span class="token attr-name">field</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>firstName<span class="token punctuation">&quot;</span></span> <span class="token attr-name">header</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>First Name<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-column</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-column</span> <span class="token attr-name">field</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>lastName<span class="token punctuation">&quot;</span></span> <span class="token attr-name">header</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Last Name<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-column</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-column</span> <span class="token attr-name">field</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>gender<span class="token punctuation">&quot;</span></span> <span class="token attr-name">header</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Gender<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-column</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-column</span> <span class="token attr-name">field</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>date<span class="token punctuation">&quot;</span></span> <span class="token attr-name">header</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Date of birth<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-column</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-table</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
<span class="token keyword">import</span> <span class="token punctuation">{</span> defineComponent<span class="token punctuation">,</span> ref <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;vue&#39;</span><span class="token punctuation">;</span>

<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token function">defineComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  <span class="token function">setup</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">const</span> data <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token punctuation">[</span>
      <span class="token punctuation">{</span>
        <span class="token literal-property property">firstName</span><span class="token operator">:</span> <span class="token string">&#39;po&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">lastName</span><span class="token operator">:</span> <span class="token string">&#39;Lang&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">gender</span><span class="token operator">:</span> <span class="token string">&#39;Male&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">date</span><span class="token operator">:</span> <span class="token string">&#39;1990/01/15&#39;</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">{</span>
        <span class="token literal-property property">firstName</span><span class="token operator">:</span> <span class="token string">&#39;john&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">lastName</span><span class="token operator">:</span> <span class="token string">&#39;Li&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">gender</span><span class="token operator">:</span> <span class="token string">&#39;Female&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">date</span><span class="token operator">:</span> <span class="token string">&#39;1990/01/16&#39;</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">{</span>
        <span class="token literal-property property">firstName</span><span class="token operator">:</span> <span class="token string">&#39;peng&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">lastName</span><span class="token operator">:</span> <span class="token string">&#39;Li&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">gender</span><span class="token operator">:</span> <span class="token string">&#39;Male&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">date</span><span class="token operator">:</span> <span class="token string">&#39;1990/01/17&#39;</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">{</span>
        <span class="token literal-property property">firstName</span><span class="token operator">:</span> <span class="token string">&#39;Dale&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">lastName</span><span class="token operator">:</span> <span class="token string">&#39;Yu&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">gender</span><span class="token operator">:</span> <span class="token string">&#39;Female&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">date</span><span class="token operator">:</span> <span class="token string">&#39;1990/01/18&#39;</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

    <span class="token keyword">return</span> <span class="token punctuation">{</span> data <span class="token punctuation">}</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><!--]--></div></div><!--]--><div class="demo-block-control" data-v-2b1aa91d><i class="control-icon icon-caret-down" data-v-2b1aa91d></i><span style="display:none;" class="control-text" data-v-2b1aa91d>显示代码</span><div class="control-button-wrap" data-v-2b1aa91d><span style="display:none;" class="control-button copy-button" data-v-2b1aa91d>复制代码片段</span></div></div></div><h3 id="自定义列" tabindex="-1">自定义列 <a class="header-anchor" href="#自定义列" aria-hidden="true">#</a></h3><div class="demo-block demo-index" data-v-2b1aa91d><!--[--><div class="source" data-v-2b1aa91d><!--[--><div><div class="devui-table" style=""><div class="devui-table__container"><div class="hidden-columns"><!--[--><div><!--[--><!--]--></div><div><div></div></div><div><div></div></div><div><div></div></div><div><div></div></div><div><!--[--><!--]--></div><!--]--></div><table class="devui-table__view devui-table--sm" cellpadding="0" cellspacing="0"><colgroup><!--[--><!--]--></colgroup><thead class="devui-table__thead" style="position:relative;"><!--[--><tr><!--[--><!--]--></tr><!--]--></thead><tbody class="devui-table__tbody"><!--[--><!--]--><!----></tbody></table><!----></div></div></div><!--]--></div><div class="meta" data-v-2b1aa91d><div class="description" data-v-2b1aa91d><!--[--><div>通过<code>d-column</code>子组件提供的<code>default</code>插槽可以实现自定义列，插槽提供<code>row</code>和<code>rowIndex</code>两个参数，分别代表行数据和行索引值。</div><!--]--></div><div class="highlight" data-v-2b1aa91d><!--[--><div class="language-vue"><pre><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-table</span> <span class="token attr-name">:data</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>dataSource<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-column</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>index<span class="token punctuation">&quot;</span></span> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>80<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">#default</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>scope<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
        {{ `No.${scope.rowIndex + 1}` }}
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-column</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-column</span> <span class="token attr-name">field</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>firstName<span class="token punctuation">&quot;</span></span> <span class="token attr-name">header</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>First Name<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-column</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-column</span> <span class="token attr-name">field</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>lastName<span class="token punctuation">&quot;</span></span> <span class="token attr-name">header</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Last Name<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-column</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-column</span> <span class="token attr-name">field</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>gender<span class="token punctuation">&quot;</span></span> <span class="token attr-name">header</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Gender<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-column</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-column</span> <span class="token attr-name">field</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>date<span class="token punctuation">&quot;</span></span> <span class="token attr-name">header</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Date of birth<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-column</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-column</span> <span class="token attr-name">header</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Operation<span class="token punctuation">&quot;</span></span> <span class="token attr-name">align</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>right<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">#default</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>scope<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-button</span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>handleClick(scope.row)<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>编辑<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-button</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-column</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-table</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
<span class="token keyword">import</span> <span class="token punctuation">{</span> defineComponent<span class="token punctuation">,</span> ref <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;vue&#39;</span><span class="token punctuation">;</span>

<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token function">defineComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  <span class="token function">setup</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">const</span> dataSource <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token punctuation">[</span>
      <span class="token punctuation">{</span>
        <span class="token literal-property property">firstName</span><span class="token operator">:</span> <span class="token string">&#39;Mark&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">lastName</span><span class="token operator">:</span> <span class="token string">&#39;Otto&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">date</span><span class="token operator">:</span> <span class="token string">&#39;1990/01/11&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">gender</span><span class="token operator">:</span> <span class="token string">&#39;Male&#39;</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">{</span>
        <span class="token literal-property property">firstName</span><span class="token operator">:</span> <span class="token string">&#39;Jacob&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">lastName</span><span class="token operator">:</span> <span class="token string">&#39;Thornton&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">gender</span><span class="token operator">:</span> <span class="token string">&#39;Female&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">date</span><span class="token operator">:</span> <span class="token string">&#39;1990/01/12&#39;</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">{</span>
        <span class="token literal-property property">firstName</span><span class="token operator">:</span> <span class="token string">&#39;Danni&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">lastName</span><span class="token operator">:</span> <span class="token string">&#39;Chen&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">gender</span><span class="token operator">:</span> <span class="token string">&#39;Male&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">date</span><span class="token operator">:</span> <span class="token string">&#39;1990/01/13&#39;</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">{</span>
        <span class="token literal-property property">firstName</span><span class="token operator">:</span> <span class="token string">&#39;green&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">lastName</span><span class="token operator">:</span> <span class="token string">&#39;gerong&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">gender</span><span class="token operator">:</span> <span class="token string">&#39;Male&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">date</span><span class="token operator">:</span> <span class="token string">&#39;1990/01/14&#39;</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">const</span> <span class="token function-variable function">handleClick</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">row</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
      console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>row<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">;</span>

    <span class="token keyword">return</span> <span class="token punctuation">{</span> dataSource<span class="token punctuation">,</span> handleClick <span class="token punctuation">}</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><!--]--></div></div><!--]--><div class="demo-block-control" data-v-2b1aa91d><i class="control-icon icon-caret-down" data-v-2b1aa91d></i><span style="display:none;" class="control-text" data-v-2b1aa91d>显示代码</span><div class="control-button-wrap" data-v-2b1aa91d><span style="display:none;" class="control-button copy-button" data-v-2b1aa91d>复制代码片段</span></div></div></div><h3 id="编辑单元格" tabindex="-1">编辑单元格 <a class="header-anchor" href="#编辑单元格" aria-hidden="true">#</a></h3><div class="demo-block demo-index" data-v-2b1aa91d><!--[--><div class="source" data-v-2b1aa91d><!--[--><div><div class="devui-table" style=""><div class="devui-table__container"><div class="hidden-columns"><!--[--><div><!--[--><!--]--></div><div><div></div></div><div><div></div></div><div><div></div></div><!--]--></div><table class="devui-table__view devui-table--sm" cellpadding="0" cellspacing="0"><colgroup><!--[--><!--]--></colgroup><thead class="devui-table__thead" style="position:relative;"><!--[--><tr><!--[--><!--]--></tr><!--]--></thead><tbody class="devui-table__tbody"><!--[--><!--]--><!----></tbody></table><!----></div></div></div><!--]--></div><div class="meta" data-v-2b1aa91d><div class="description" data-v-2b1aa91d><!--[--><div>通过<code>d-column</code>子组件提供的<code>cell</code>、<code>cellEdit</code>插槽以及属性<code>type</code>设置为<code>editable</code>实现编辑单元格。此功能需配合<code>row-key</code>属性使用。</div><!--]--></div><div class="highlight" data-v-2b1aa91d><!--[--><div class="language-vue"><pre><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-table</span> <span class="token attr-name">ref</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>tableRef<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:data</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>dataSource<span class="token punctuation">&quot;</span></span> <span class="token attr-name">row-key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>id<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@cellClick</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>cellClick<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-column</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>index<span class="token punctuation">&quot;</span></span> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>80<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">#default</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>scope<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
        {{ `No.${scope.rowIndex + 1}` }}
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-column</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-column</span> <span class="token attr-name">field</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>firstName<span class="token punctuation">&quot;</span></span> <span class="token attr-name">header</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>First Name<span class="token punctuation">&quot;</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>editable<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">#cell</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>scope<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
        {{ scope.row.firstName }}
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">#cellEdit</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>scope<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-input</span>
          <span class="token attr-name">ref</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>firstNameRef<span class="token punctuation">&quot;</span></span>
          <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>scope.row.firstName<span class="token punctuation">&quot;</span></span>
          <span class="token attr-name">@change</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>(value) =&gt; change(scope.row, scope.rowIndex, &#39;firstName&#39;, value)<span class="token punctuation">&quot;</span></span>
          <span class="token attr-name">@blur</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>() =&gt; blur(scope.row, scope.rowIndex, &#39;firstName&#39;)<span class="token punctuation">&quot;</span></span>
        <span class="token punctuation">/&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-column</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-column</span> <span class="token attr-name">field</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>lastName<span class="token punctuation">&quot;</span></span> <span class="token attr-name">header</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Last Name<span class="token punctuation">&quot;</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>editable<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">#cell</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>scope<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
        {{ scope.row.lastName }}
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">#cellEdit</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>scope<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-input</span>
          <span class="token attr-name">ref</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>lastNameRef<span class="token punctuation">&quot;</span></span>
          <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>scope.row.lastName<span class="token punctuation">&quot;</span></span>
          <span class="token attr-name">@change</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>(value) =&gt; change(scope.row, scope.rowIndex, &#39;lastName&#39;, value)<span class="token punctuation">&quot;</span></span>
          <span class="token attr-name">@blur</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>() =&gt; blur(scope.row, scope.rowIndex, &#39;lastName&#39;)<span class="token punctuation">&quot;</span></span>
        <span class="token punctuation">/&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-column</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-column</span> <span class="token attr-name">field</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>gender<span class="token punctuation">&quot;</span></span> <span class="token attr-name">header</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Gender<span class="token punctuation">&quot;</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>editable<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">#cell</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>scope<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
        {{ scope.row.gender }}
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">#cellEdit</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>scope<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-select</span>
          <span class="token attr-name">ref</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>genderRef<span class="token punctuation">&quot;</span></span>
          <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>scope.row.gender<span class="token punctuation">&quot;</span></span>
          <span class="token attr-name">:options</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>options<span class="token punctuation">&quot;</span></span>
          <span class="token attr-name">@valueChange</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>(value) =&gt; change(scope.row, scope.rowIndex, &#39;gender&#39;, value)<span class="token punctuation">&quot;</span></span>
        <span class="token punctuation">/&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-column</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-table</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
<span class="token keyword">import</span> <span class="token punctuation">{</span> defineComponent<span class="token punctuation">,</span> ref<span class="token punctuation">,</span> nextTick <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;vue&#39;</span><span class="token punctuation">;</span>

<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token function">defineComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  <span class="token function">setup</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">const</span> tableRef <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">const</span> firstNameRef <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">const</span> lastNameRef <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">const</span> genderRef <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">const</span> dataSource <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token punctuation">[</span>
      <span class="token punctuation">{</span>
        <span class="token literal-property property">firstName</span><span class="token operator">:</span> <span class="token string">&#39;Mark&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">lastName</span><span class="token operator">:</span> <span class="token string">&#39;Otto&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">gender</span><span class="token operator">:</span> <span class="token string">&#39;Male&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token string">&#39;Mark&#39;</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">{</span>
        <span class="token literal-property property">firstName</span><span class="token operator">:</span> <span class="token string">&#39;Jacob&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">lastName</span><span class="token operator">:</span> <span class="token string">&#39;Thornton&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">gender</span><span class="token operator">:</span> <span class="token string">&#39;Female&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token string">&#39;Jacob&#39;</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

    <span class="token keyword">const</span> options <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">&#39;Female&#39;</span><span class="token punctuation">,</span> <span class="token string">&#39;Male&#39;</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

    <span class="token keyword">const</span> <span class="token function-variable function">change</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">row<span class="token punctuation">,</span> rowIndex<span class="token punctuation">,</span> field<span class="token punctuation">,</span> value</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
      dataSource<span class="token punctuation">.</span>value<span class="token punctuation">[</span>rowIndex<span class="token punctuation">]</span><span class="token punctuation">[</span>field<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token keyword">typeof</span> value <span class="token operator">===</span> <span class="token string">&#39;object&#39;</span> <span class="token operator">?</span> value<span class="token punctuation">.</span>value <span class="token operator">:</span> value<span class="token punctuation">;</span>
      tableRef<span class="token punctuation">.</span>value<span class="token punctuation">.</span>store<span class="token punctuation">.</span><span class="token function">setCellMode</span><span class="token punctuation">(</span>row<span class="token punctuation">,</span> rowIndex<span class="token punctuation">,</span> field<span class="token punctuation">,</span> <span class="token string">&#39;readonly&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">;</span>
    <span class="token keyword">const</span> <span class="token function-variable function">blur</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">row<span class="token punctuation">,</span> rowIndex<span class="token punctuation">,</span> field</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
      tableRef<span class="token punctuation">.</span>value<span class="token punctuation">.</span>store<span class="token punctuation">.</span><span class="token function">setCellMode</span><span class="token punctuation">(</span>row<span class="token punctuation">,</span> rowIndex<span class="token punctuation">,</span> field<span class="token punctuation">,</span> <span class="token string">&#39;readonly&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">;</span>

    <span class="token keyword">const</span> <span class="token function-variable function">cellClick</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">obj</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
      tableRef<span class="token punctuation">.</span>value<span class="token punctuation">.</span>store<span class="token punctuation">.</span><span class="token function">setCellMode</span><span class="token punctuation">(</span>obj<span class="token punctuation">.</span>row<span class="token punctuation">,</span> obj<span class="token punctuation">.</span>rowIndex<span class="token punctuation">,</span> obj<span class="token punctuation">.</span>column<span class="token punctuation">.</span>field<span class="token punctuation">,</span> <span class="token string">&#39;edit&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token keyword">const</span> refMap <span class="token operator">=</span> <span class="token punctuation">{</span>
        <span class="token literal-property property">firstName</span><span class="token operator">:</span> firstNameRef<span class="token punctuation">,</span>
        <span class="token literal-property property">lastName</span><span class="token operator">:</span> lastNameRef<span class="token punctuation">,</span>
        <span class="token literal-property property">gender</span><span class="token operator">:</span> genderRef<span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">;</span>
      <span class="token keyword">const</span> targetRef <span class="token operator">=</span> refMap<span class="token punctuation">[</span>obj<span class="token punctuation">.</span>column<span class="token punctuation">.</span>field<span class="token punctuation">]</span><span class="token punctuation">;</span>
      <span class="token function">nextTick</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
        targetRef<span class="token operator">?.</span>value<span class="token operator">?.</span><span class="token function">focus</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">;</span>

    <span class="token keyword">return</span> <span class="token punctuation">{</span> tableRef<span class="token punctuation">,</span> firstNameRef<span class="token punctuation">,</span> lastNameRef<span class="token punctuation">,</span> genderRef<span class="token punctuation">,</span> dataSource<span class="token punctuation">,</span> options<span class="token punctuation">,</span> change<span class="token punctuation">,</span> blur<span class="token punctuation">,</span> cellClick <span class="token punctuation">}</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><!--]--></div></div><!--]--><div class="demo-block-control" data-v-2b1aa91d><i class="control-icon icon-caret-down" data-v-2b1aa91d></i><span style="display:none;" class="control-text" data-v-2b1aa91d>显示代码</span><div class="control-button-wrap" data-v-2b1aa91d><span style="display:none;" class="control-button copy-button" data-v-2b1aa91d>复制代码片段</span></div></div></div><h3 id="自定义表头" tabindex="-1">自定义表头 <a class="header-anchor" href="#自定义表头" aria-hidden="true">#</a></h3><div class="demo-block demo-index" data-v-2b1aa91d><!--[--><div class="source" data-v-2b1aa91d><!--[--><div><div class="devui-table" style=""><div class="devui-table__container"><div class="hidden-columns"><!--[--><div><div></div></div><div><div></div></div><div><div></div></div><div><div></div></div><!--]--></div><table class="devui-table__view devui-table--sm" cellpadding="0" cellspacing="0"><colgroup><!--[--><!--]--></colgroup><thead class="devui-table__thead" style="position:relative;"><!--[--><tr><!--[--><!--]--></tr><!--]--></thead><tbody class="devui-table__tbody"><!--[--><!--]--><!----></tbody></table><!----></div></div></div><!--]--></div><div class="meta" data-v-2b1aa91d><div class="description" data-v-2b1aa91d><!--[--><div>通过<code>d-column</code>子组件提供的<code>header</code>插槽可以实现自定义表头。</div><!--]--></div><div class="highlight" data-v-2b1aa91d><!--[--><div class="language-vue"><pre><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-table</span> <span class="token attr-name">:data</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>dataSource<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-column</span> <span class="token attr-name">field</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>firstName<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">#header</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token value css language-css"><span class="token property">margin-right</span><span class="token punctuation">:</span>4px<span class="token punctuation">;</span><span class="token property">font-size</span><span class="token punctuation">:</span><span class="token function">var</span><span class="token punctuation">(</span>--devui-font-size<span class="token punctuation">,</span>12px<span class="token punctuation">)</span></span><span class="token punctuation">&quot;</span></span></span><span class="token punctuation">&gt;</span></span>First Name<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-popover</span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>some tips text<span class="token punctuation">&quot;</span></span> <span class="token attr-name">trigger</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>hover<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:position</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>[&#39;top&#39;]<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-icon</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>info-o<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-icon</span><span class="token punctuation">&gt;</span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-popover</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-column</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-column</span> <span class="token attr-name">field</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>lastName<span class="token punctuation">&quot;</span></span> <span class="token attr-name">header</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Last Name<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-column</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-column</span> <span class="token attr-name">field</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>gender<span class="token punctuation">&quot;</span></span> <span class="token attr-name">header</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Gender<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-column</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-column</span> <span class="token attr-name">field</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>date<span class="token punctuation">&quot;</span></span> <span class="token attr-name">header</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Date of birth<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-column</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-table</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
<span class="token keyword">import</span> <span class="token punctuation">{</span> defineComponent<span class="token punctuation">,</span> ref <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;vue&#39;</span><span class="token punctuation">;</span>

<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token function">defineComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  <span class="token function">setup</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">const</span> dataSource <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token punctuation">[</span>
      <span class="token punctuation">{</span>
        <span class="token literal-property property">firstName</span><span class="token operator">:</span> <span class="token string">&#39;Mark&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">lastName</span><span class="token operator">:</span> <span class="token string">&#39;Otto&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">date</span><span class="token operator">:</span> <span class="token string">&#39;1990/01/11&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">gender</span><span class="token operator">:</span> <span class="token string">&#39;Male&#39;</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">{</span>
        <span class="token literal-property property">firstName</span><span class="token operator">:</span> <span class="token string">&#39;Jacob&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">lastName</span><span class="token operator">:</span> <span class="token string">&#39;Thornton&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">gender</span><span class="token operator">:</span> <span class="token string">&#39;Female&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">date</span><span class="token operator">:</span> <span class="token string">&#39;1990/01/12&#39;</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">{</span>
        <span class="token literal-property property">firstName</span><span class="token operator">:</span> <span class="token string">&#39;Danni&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">lastName</span><span class="token operator">:</span> <span class="token string">&#39;Chen&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">gender</span><span class="token operator">:</span> <span class="token string">&#39;Male&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">date</span><span class="token operator">:</span> <span class="token string">&#39;1990/01/13&#39;</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">{</span>
        <span class="token literal-property property">firstName</span><span class="token operator">:</span> <span class="token string">&#39;green&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">lastName</span><span class="token operator">:</span> <span class="token string">&#39;gerong&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">gender</span><span class="token operator">:</span> <span class="token string">&#39;Male&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">date</span><span class="token operator">:</span> <span class="token string">&#39;1990/01/14&#39;</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

    <span class="token keyword">return</span> <span class="token punctuation">{</span> dataSource <span class="token punctuation">}</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><!--]--></div></div><!--]--><div class="demo-block-control" data-v-2b1aa91d><i class="control-icon icon-caret-down" data-v-2b1aa91d></i><span style="display:none;" class="control-text" data-v-2b1aa91d>显示代码</span><div class="control-button-wrap" data-v-2b1aa91d><span style="display:none;" class="control-button copy-button" data-v-2b1aa91d>复制代码片段</span></div></div></div><h3 id="空数据模板" tabindex="-1">空数据模板 <a class="header-anchor" href="#空数据模板" aria-hidden="true">#</a></h3><div class="demo-block demo-index" data-v-2b1aa91d><!--[--><div class="source" data-v-2b1aa91d><!--[--><div><div><button class="devui-button devui-button--outline devui-button--outline--secondary devui-button--md"><div class="loading-icon__container" style="display:none;"><div class="devui-icon__container devui-icon--no-slots button-icon-loading"><!----><i class="icon icon-loading button-icon-loading" style="font-size:inherit;color:#BBDEFB;transform:rotate(undefineddeg);"></i><!----></div></div><span class="button-content"><!--[-->更新数据<!--]--></span></button><div class="devui-table" style=""><div class="devui-table__container"><div class="hidden-columns"><!--[--><div><div></div></div><div><div></div></div><div><div></div></div><div><div></div></div><!--]--></div><table class="devui-table__view devui-table--sm" cellpadding="0" cellspacing="0"><colgroup><!--[--><!--]--></colgroup><thead class="devui-table__thead" style="position:relative;"><!--[--><tr><!--[--><!--]--></tr><!--]--></thead><!----></table><div class="devui-table__empty"><!--[--><div style="text-align:center;">No Data</div><!--]--></div></div></div></div></div><!--]--></div><div class="meta" data-v-2b1aa91d><div class="description" data-v-2b1aa91d><!--[--><div>当传入的数据为空时，默认展示空数据模板。</div><!--]--></div><div class="highlight" data-v-2b1aa91d><!--[--><div class="language-vue"><pre><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-button</span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>handleClick<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>更新数据<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-button</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-table</span> <span class="token attr-name">:data</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>emptyData<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:show-loading</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>showLoading<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-column</span> <span class="token attr-name">field</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>firstName<span class="token punctuation">&quot;</span></span> <span class="token attr-name">header</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>First Name<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-column</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-column</span> <span class="token attr-name">field</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>lastName<span class="token punctuation">&quot;</span></span> <span class="token attr-name">header</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Last Name<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-column</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-column</span> <span class="token attr-name">field</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>gender<span class="token punctuation">&quot;</span></span> <span class="token attr-name">header</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Gender<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-column</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-column</span> <span class="token attr-name">field</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>date<span class="token punctuation">&quot;</span></span> <span class="token attr-name">header</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Date of birth<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-column</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">#empty</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token value css language-css"><span class="token property">text-align</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span></span><span class="token punctuation">&quot;</span></span></span><span class="token punctuation">&gt;</span></span>No Data<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-table</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
<span class="token keyword">import</span> <span class="token punctuation">{</span> defineComponent<span class="token punctuation">,</span> ref <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;vue&#39;</span><span class="token punctuation">;</span>

<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token function">defineComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  <span class="token function">setup</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">const</span> emptyData <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">const</span> showLoading <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token boolean">false</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">const</span> <span class="token function-variable function">handleClick</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
      showLoading<span class="token punctuation">.</span>value <span class="token operator">=</span> <span class="token boolean">true</span><span class="token punctuation">;</span>
      <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
        showLoading<span class="token punctuation">.</span>value <span class="token operator">=</span> <span class="token boolean">false</span><span class="token punctuation">;</span>
        emptyData<span class="token punctuation">.</span>value <span class="token operator">=</span> <span class="token punctuation">[</span>
          <span class="token punctuation">{</span>
            <span class="token literal-property property">firstName</span><span class="token operator">:</span> <span class="token string">&#39;po&#39;</span><span class="token punctuation">,</span>
            <span class="token literal-property property">lastName</span><span class="token operator">:</span> <span class="token string">&#39;Lang&#39;</span><span class="token punctuation">,</span>
            <span class="token literal-property property">gender</span><span class="token operator">:</span> <span class="token string">&#39;Male&#39;</span><span class="token punctuation">,</span>
            <span class="token literal-property property">date</span><span class="token operator">:</span> <span class="token string">&#39;1990/01/15&#39;</span><span class="token punctuation">,</span>
          <span class="token punctuation">}</span><span class="token punctuation">,</span>
          <span class="token punctuation">{</span>
            <span class="token literal-property property">firstName</span><span class="token operator">:</span> <span class="token string">&#39;john&#39;</span><span class="token punctuation">,</span>
            <span class="token literal-property property">lastName</span><span class="token operator">:</span> <span class="token string">&#39;Li&#39;</span><span class="token punctuation">,</span>
            <span class="token literal-property property">gender</span><span class="token operator">:</span> <span class="token string">&#39;Female&#39;</span><span class="token punctuation">,</span>
            <span class="token literal-property property">date</span><span class="token operator">:</span> <span class="token string">&#39;1990/01/16&#39;</span><span class="token punctuation">,</span>
          <span class="token punctuation">}</span><span class="token punctuation">,</span>
          <span class="token punctuation">{</span>
            <span class="token literal-property property">firstName</span><span class="token operator">:</span> <span class="token string">&#39;peng&#39;</span><span class="token punctuation">,</span>
            <span class="token literal-property property">lastName</span><span class="token operator">:</span> <span class="token string">&#39;Li&#39;</span><span class="token punctuation">,</span>
            <span class="token literal-property property">gender</span><span class="token operator">:</span> <span class="token string">&#39;Male&#39;</span><span class="token punctuation">,</span>
            <span class="token literal-property property">date</span><span class="token operator">:</span> <span class="token string">&#39;1990/01/17&#39;</span><span class="token punctuation">,</span>
          <span class="token punctuation">}</span><span class="token punctuation">,</span>
          <span class="token punctuation">{</span>
            <span class="token literal-property property">firstName</span><span class="token operator">:</span> <span class="token string">&#39;Dale&#39;</span><span class="token punctuation">,</span>
            <span class="token literal-property property">lastName</span><span class="token operator">:</span> <span class="token string">&#39;Yu&#39;</span><span class="token punctuation">,</span>
            <span class="token literal-property property">gender</span><span class="token operator">:</span> <span class="token string">&#39;Female&#39;</span><span class="token punctuation">,</span>
            <span class="token literal-property property">date</span><span class="token operator">:</span> <span class="token string">&#39;1990/01/18&#39;</span><span class="token punctuation">,</span>
          <span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token punctuation">]</span><span class="token punctuation">;</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">1000</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">;</span>

    <span class="token keyword">return</span> <span class="token punctuation">{</span> emptyData<span class="token punctuation">,</span> showLoading<span class="token punctuation">,</span> handleClick <span class="token punctuation">}</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><!--]--></div></div><!--]--><div class="demo-block-control" data-v-2b1aa91d><i class="control-icon icon-caret-down" data-v-2b1aa91d></i><span style="display:none;" class="control-text" data-v-2b1aa91d>显示代码</span><div class="control-button-wrap" data-v-2b1aa91d><span style="display:none;" class="control-button copy-button" data-v-2b1aa91d>复制代码片段</span></div></div></div><h3 id="固定表头" tabindex="-1">固定表头 <a class="header-anchor" href="#固定表头" aria-hidden="true">#</a></h3><div class="demo-block demo-index" data-v-2b1aa91d><!--[--><div class="source" data-v-2b1aa91d><!--[--><div><div class="devui-table" style="height:200px;width:100%;"><div class="devui-table__container"><div class="hidden-columns"><!--[--><div><div></div></div><div><div></div></div><div><div></div></div><div><div></div></div><!--]--></div><div class="devui-table__fix-header"><div class="devui-table__header-wrapper"><table class="devui-table__view devui-table--sm" cellpadding="0" cellspacing="0"><colgroup><!--[--><!--]--></colgroup><thead class="devui-table__thead"><!--[--><tr><!--[--><!--]--></tr><!--]--></thead></table></div><div class="devui-table__scroll-view"><table class="devui-table__view devui-table--sm" cellpadding="0" cellspacing="0"><colgroup><!--[--><!--]--></colgroup><tbody class="devui-table__tbody" style="flex:1;"><!--[--><!--]--><!----></tbody></table></div></div><!----></div></div></div><!--]--></div><div class="meta" data-v-2b1aa91d><div class="description" data-v-2b1aa91d><!--[--><div><code>fix-header</code>参数可以设置是否固定表头，使之不随内容滚动。</div><!--]--></div><div class="highlight" data-v-2b1aa91d><!--[--><div class="language-vue"><pre><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-table</span> <span class="token attr-name">:data</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>dataSource<span class="token punctuation">&quot;</span></span> <span class="token attr-name">table-height</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>200px<span class="token punctuation">&quot;</span></span> <span class="token attr-name">fix-header</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token value css language-css"><span class="token property">width</span><span class="token punctuation">:</span>100%</span><span class="token punctuation">&quot;</span></span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-column</span> <span class="token attr-name">field</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>firstName<span class="token punctuation">&quot;</span></span> <span class="token attr-name">header</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>First Name<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>150<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-column</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-column</span> <span class="token attr-name">field</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>lastName<span class="token punctuation">&quot;</span></span> <span class="token attr-name">header</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Last Name<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>150<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-column</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-column</span> <span class="token attr-name">field</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>gender<span class="token punctuation">&quot;</span></span> <span class="token attr-name">header</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Gender<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>150<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-column</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-column</span> <span class="token attr-name">field</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>date<span class="token punctuation">&quot;</span></span> <span class="token attr-name">header</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Date of birth<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>150<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-column</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-table</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
<span class="token keyword">import</span> <span class="token punctuation">{</span> defineComponent<span class="token punctuation">,</span> ref <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;vue&#39;</span><span class="token punctuation">;</span>

<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token function">defineComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  <span class="token function">setup</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">const</span> dataSource <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token punctuation">[</span>
      <span class="token punctuation">{</span>
        <span class="token literal-property property">firstName</span><span class="token operator">:</span> <span class="token string">&#39;Mark&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">lastName</span><span class="token operator">:</span> <span class="token string">&#39;Otto&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">date</span><span class="token operator">:</span> <span class="token string">&#39;1990/01/11&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">gender</span><span class="token operator">:</span> <span class="token string">&#39;Male&#39;</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">{</span>
        <span class="token literal-property property">firstName</span><span class="token operator">:</span> <span class="token string">&#39;Jacob&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">lastName</span><span class="token operator">:</span> <span class="token string">&#39;Thornton&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">gender</span><span class="token operator">:</span> <span class="token string">&#39;Female&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">date</span><span class="token operator">:</span> <span class="token string">&#39;1990/01/12&#39;</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">{</span>
        <span class="token literal-property property">firstName</span><span class="token operator">:</span> <span class="token string">&#39;Danni&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">lastName</span><span class="token operator">:</span> <span class="token string">&#39;Chen&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">gender</span><span class="token operator">:</span> <span class="token string">&#39;Male&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">date</span><span class="token operator">:</span> <span class="token string">&#39;1990/01/13&#39;</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">{</span>
        <span class="token literal-property property">firstName</span><span class="token operator">:</span> <span class="token string">&#39;green&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">lastName</span><span class="token operator">:</span> <span class="token string">&#39;gerong&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">gender</span><span class="token operator">:</span> <span class="token string">&#39;Male&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">date</span><span class="token operator">:</span> <span class="token string">&#39;1990/01/14&#39;</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">{</span>
        <span class="token literal-property property">firstName</span><span class="token operator">:</span> <span class="token string">&#39;po&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">lastName</span><span class="token operator">:</span> <span class="token string">&#39;lang&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">gender</span><span class="token operator">:</span> <span class="token string">&#39;Male&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">date</span><span class="token operator">:</span> <span class="token string">&#39;1990/01/14&#39;</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">{</span>
        <span class="token literal-property property">firstName</span><span class="token operator">:</span> <span class="token string">&#39;john&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">lastName</span><span class="token operator">:</span> <span class="token string">&#39;li&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">gender</span><span class="token operator">:</span> <span class="token string">&#39;Male&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">date</span><span class="token operator">:</span> <span class="token string">&#39;1990/01/14&#39;</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">{</span>
        <span class="token literal-property property">firstName</span><span class="token operator">:</span> <span class="token string">&#39;peng&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">lastName</span><span class="token operator">:</span> <span class="token string">&#39;li&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">gender</span><span class="token operator">:</span> <span class="token string">&#39;Female&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">date</span><span class="token operator">:</span> <span class="token string">&#39;1990/01/14&#39;</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">{</span>
        <span class="token literal-property property">firstName</span><span class="token operator">:</span> <span class="token string">&#39;Danni&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">lastName</span><span class="token operator">:</span> <span class="token string">&#39;Yu&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">gender</span><span class="token operator">:</span> <span class="token string">&#39;Female&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">date</span><span class="token operator">:</span> <span class="token string">&#39;1990/01/14&#39;</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

    <span class="token keyword">return</span> <span class="token punctuation">{</span> dataSource <span class="token punctuation">}</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><!--]--></div></div><!--]--><div class="demo-block-control" data-v-2b1aa91d><i class="control-icon icon-caret-down" data-v-2b1aa91d></i><span style="display:none;" class="control-text" data-v-2b1aa91d>显示代码</span><div class="control-button-wrap" data-v-2b1aa91d><span style="display:none;" class="control-button copy-button" data-v-2b1aa91d>复制代码片段</span></div></div></div><h3 id="固定列" tabindex="-1">固定列 <a class="header-anchor" href="#固定列" aria-hidden="true">#</a></h3><div class="demo-block demo-index" data-v-2b1aa91d><!--[--><div class="source" data-v-2b1aa91d><!--[--><div><div class="devui-table" style=""><div class="devui-table__container"><div class="hidden-columns"><!--[--><div><div></div></div><div><div></div></div><div><div></div></div><div><div></div></div><div><div></div></div><div><div></div></div><div><div></div></div><div><div></div></div><div><div></div></div><div><div></div></div><!--]--></div><table class="devui-table__view devui-table--layout-auto devui-table--sm" cellpadding="0" cellspacing="0"><colgroup><!--[--><!--]--></colgroup><thead class="devui-table__thead" style="position:relative;"><!--[--><tr><!--[--><!--]--></tr><!--]--></thead><tbody class="devui-table__tbody"><!--[--><!--]--><!----></tbody></table><!----></div></div></div><!--]--></div><div class="meta" data-v-2b1aa91d><div class="description" data-v-2b1aa91d><!--[--><div>当表格列过多时，固定列有利于用户在左右滑动时，能够便捷的进行数据定位与对比，通过<code>fixed-left</code>和<code>fixed-right</code>来配置。</div><!--]--></div><div class="highlight" data-v-2b1aa91d><!--[--><div class="language-vue"><pre><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-table</span> <span class="token attr-name">:data</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>tableDataFixedColumn<span class="token punctuation">&quot;</span></span> <span class="token attr-name">table-layout</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>auto<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-column</span> <span class="token attr-name">field</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>idNo<span class="token punctuation">&quot;</span></span> <span class="token attr-name">header</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>ID Card Number<span class="token punctuation">&quot;</span></span> <span class="token attr-name">fixed-left</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>0px<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-column</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-column</span> <span class="token attr-name">field</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>firstName<span class="token punctuation">&quot;</span></span> <span class="token attr-name">header</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>First Name<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-column</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-column</span> <span class="token attr-name">field</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>lastName<span class="token punctuation">&quot;</span></span> <span class="token attr-name">header</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Last Name<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-column</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-column</span> <span class="token attr-name">field</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>gender<span class="token punctuation">&quot;</span></span> <span class="token attr-name">header</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Gender<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-column</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-column</span> <span class="token attr-name">field</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>date<span class="token punctuation">&quot;</span></span> <span class="token attr-name">header</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Date of birth<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-column</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-column</span> <span class="token attr-name">field</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>address<span class="token punctuation">&quot;</span></span> <span class="token attr-name">header</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Address<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-column</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-column</span> <span class="token attr-name">field</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>occupation<span class="token punctuation">&quot;</span></span> <span class="token attr-name">header</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Occupation<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-column</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-column</span> <span class="token attr-name">field</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>occupation<span class="token punctuation">&quot;</span></span> <span class="token attr-name">header</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Occupation<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-column</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-column</span> <span class="token attr-name">field</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>occupation<span class="token punctuation">&quot;</span></span> <span class="token attr-name">header</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Occupation<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-column</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-column</span> <span class="token attr-name">field</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>occupation<span class="token punctuation">&quot;</span></span> <span class="token attr-name">header</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Occupation<span class="token punctuation">&quot;</span></span> <span class="token attr-name">fixed-right</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>0px<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-column</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-table</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
<span class="token keyword">import</span> <span class="token punctuation">{</span> defineComponent<span class="token punctuation">,</span> ref<span class="token punctuation">,</span> computed <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;vue&#39;</span><span class="token punctuation">;</span>

<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token function">defineComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  <span class="token function">setup</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">const</span> tableDataFixedColumn <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token punctuation">[</span>
      <span class="token punctuation">{</span>
        <span class="token literal-property property">firstName</span><span class="token operator">:</span> <span class="token string">&#39;po&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">lastName</span><span class="token operator">:</span> <span class="token string">&#39;Lang&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">gender</span><span class="token operator">:</span> <span class="token string">&#39;Male&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">date</span><span class="token operator">:</span> <span class="token string">&#39;1990/01/15&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">address</span><span class="token operator">:</span> <span class="token string">&#39;Shenzhen Guangdong&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">occupation</span><span class="token operator">:</span> <span class="token string">&#39;Worker&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">idNo</span><span class="token operator">:</span> <span class="token string">&#39;2000**********9999&#39;</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">{</span>
        <span class="token literal-property property">firstName</span><span class="token operator">:</span> <span class="token string">&#39;john&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">lastName</span><span class="token operator">:</span> <span class="token string">&#39;Li&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">gender</span><span class="token operator">:</span> <span class="token string">&#39;Female&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">date</span><span class="token operator">:</span> <span class="token string">&#39;1990/01/16&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">address</span><span class="token operator">:</span> <span class="token string">&#39;Shenzhen Guangdong&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">occupation</span><span class="token operator">:</span> <span class="token string">&#39;Worker&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">idNo</span><span class="token operator">:</span> <span class="token string">&#39;2000**********9999&#39;</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">{</span>
        <span class="token literal-property property">firstName</span><span class="token operator">:</span> <span class="token string">&#39;peng&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">lastName</span><span class="token operator">:</span> <span class="token string">&#39;Li&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">gender</span><span class="token operator">:</span> <span class="token string">&#39;Male&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">date</span><span class="token operator">:</span> <span class="token string">&#39;1990/01/17&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">address</span><span class="token operator">:</span> <span class="token string">&#39;Shenzhen Guangdong&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">occupation</span><span class="token operator">:</span> <span class="token string">&#39;Worker&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">idNo</span><span class="token operator">:</span> <span class="token string">&#39;2000**********9999&#39;</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">{</span>
        <span class="token literal-property property">firstName</span><span class="token operator">:</span> <span class="token string">&#39;Dale&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">lastName</span><span class="token operator">:</span> <span class="token string">&#39;Yu&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">gender</span><span class="token operator">:</span> <span class="token string">&#39;Female&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">date</span><span class="token operator">:</span> <span class="token string">&#39;1990/01/18&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">address</span><span class="token operator">:</span> <span class="token string">&#39;Shenzhen Guangdong&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">occupation</span><span class="token operator">:</span> <span class="token string">&#39;Worker&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">idNo</span><span class="token operator">:</span> <span class="token string">&#39;2000**********9999&#39;</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

    <span class="token keyword">const</span> filterList <span class="token operator">=</span> <span class="token function">computed</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span>
      tableDataFixedColumn<span class="token punctuation">.</span>value<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">item</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>item<span class="token punctuation">.</span>firstName<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"> </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>item<span class="token punctuation">.</span>lastName<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">,</span> <span class="token literal-property property">value</span><span class="token operator">:</span> item<span class="token punctuation">.</span>firstName <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
    <span class="token punctuation">)</span><span class="token punctuation">;</span>

    <span class="token keyword">return</span> <span class="token punctuation">{</span>
      tableDataFixedColumn<span class="token punctuation">,</span>
      filterList<span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><!--]--></div></div><!--]--><div class="demo-block-control" data-v-2b1aa91d><i class="control-icon icon-caret-down" data-v-2b1aa91d></i><span style="display:none;" class="control-text" data-v-2b1aa91d>显示代码</span><div class="control-button-wrap" data-v-2b1aa91d><span style="display:none;" class="control-button copy-button" data-v-2b1aa91d>复制代码片段</span></div></div></div><h3 id="合并单元格" tabindex="-1">合并单元格 <a class="header-anchor" href="#合并单元格" aria-hidden="true">#</a></h3><div class="demo-block demo-index" data-v-2b1aa91d><!--[--><div class="source" data-v-2b1aa91d><!--[--><div><div class="devui-table" style=""><div class="devui-table__container"><div class="hidden-columns"><!--[--><div><div></div></div><div><div></div></div><div><div></div></div><div><div></div></div><!--]--></div><table class="devui-table__view devui-table--sm devui-table--bordered" cellpadding="0" cellspacing="0"><colgroup><!--[--><!--]--></colgroup><thead class="devui-table__thead" style="position:relative;"><!--[--><tr><!--[--><!--]--></tr><!--]--></thead><tbody class="devui-table__tbody"><!--[--><!--]--><!----></tbody></table><!----></div></div></div><!--]--></div><div class="meta" data-v-2b1aa91d><div class="description" data-v-2b1aa91d><!--[--><div>通过<code>span-method</code>方法可以自定义合并单元格，方法参数是一个对象，对象包含属性如下：当前行<code>row</code>、当前列<code>column</code>、当前行索引<code>rowIndex</code>、当前列索引<code>columnIndex</code>。该方法可以返回包含两个元素的数组，第一个元素是<code>rowspan</code>，第二个元素是<code>colspan</code>；也可以返回一个对象，属性为<code>rowspan</code>和<code>colspan</code>。</div><!--]--></div><div class="highlight" data-v-2b1aa91d><!--[--><div class="language-vue"><pre><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-table</span> <span class="token attr-name">:data</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>dataSource<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:span-method</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>spanMethod<span class="token punctuation">&quot;</span></span> <span class="token attr-name">border-type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>bordered<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-column</span> <span class="token attr-name">field</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>firstName<span class="token punctuation">&quot;</span></span> <span class="token attr-name">header</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>First Name<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-column</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-column</span> <span class="token attr-name">field</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>lastName<span class="token punctuation">&quot;</span></span> <span class="token attr-name">header</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Last Name<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-column</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-column</span> <span class="token attr-name">field</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>gender<span class="token punctuation">&quot;</span></span> <span class="token attr-name">header</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Gender<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-column</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-column</span> <span class="token attr-name">field</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>date<span class="token punctuation">&quot;</span></span> <span class="token attr-name">header</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Date of birth<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-column</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-table</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
<span class="token keyword">import</span> <span class="token punctuation">{</span> defineComponent<span class="token punctuation">,</span> ref <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;vue&#39;</span><span class="token punctuation">;</span>

<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token function">defineComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  <span class="token function">setup</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">const</span> dataSource <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token punctuation">[</span>
      <span class="token punctuation">{</span>
        <span class="token literal-property property">firstName</span><span class="token operator">:</span> <span class="token string">&#39;Mark&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">lastName</span><span class="token operator">:</span> <span class="token string">&#39;Otto&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">date</span><span class="token operator">:</span> <span class="token string">&#39;1990/01/11&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">gender</span><span class="token operator">:</span> <span class="token string">&#39;Male&#39;</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">{</span>
        <span class="token literal-property property">firstName</span><span class="token operator">:</span> <span class="token string">&#39;Jacob&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">lastName</span><span class="token operator">:</span> <span class="token string">&#39;Thornton&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">gender</span><span class="token operator">:</span> <span class="token string">&#39;Female&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">date</span><span class="token operator">:</span> <span class="token string">&#39;1990/01/12&#39;</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">{</span>
        <span class="token literal-property property">firstName</span><span class="token operator">:</span> <span class="token string">&#39;Danni&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">lastName</span><span class="token operator">:</span> <span class="token string">&#39;Chen&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">gender</span><span class="token operator">:</span> <span class="token string">&#39;Male&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">date</span><span class="token operator">:</span> <span class="token string">&#39;1990/01/13&#39;</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">{</span>
        <span class="token literal-property property">firstName</span><span class="token operator">:</span> <span class="token string">&#39;green&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">lastName</span><span class="token operator">:</span> <span class="token string">&#39;gerong&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">gender</span><span class="token operator">:</span> <span class="token string">&#39;Male&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">date</span><span class="token operator">:</span> <span class="token string">&#39;1990/01/14&#39;</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">const</span> <span class="token function-variable function">spanMethod</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> row<span class="token punctuation">,</span> column<span class="token punctuation">,</span> rowIndex<span class="token punctuation">,</span> columnIndex <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
      <span class="token keyword">if</span> <span class="token punctuation">(</span>rowIndex <span class="token operator">===</span> <span class="token number">0</span> <span class="token operator">&amp;&amp;</span> columnIndex <span class="token operator">===</span> <span class="token number">0</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">return</span> <span class="token punctuation">{</span> <span class="token literal-property property">rowspan</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span> <span class="token literal-property property">colspan</span><span class="token operator">:</span> <span class="token number">2</span> <span class="token punctuation">}</span><span class="token punctuation">;</span>
      <span class="token punctuation">}</span>
      <span class="token keyword">if</span> <span class="token punctuation">(</span>rowIndex <span class="token operator">===</span> <span class="token number">2</span> <span class="token operator">&amp;&amp;</span> columnIndex <span class="token operator">===</span> <span class="token number">0</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">return</span> <span class="token punctuation">[</span><span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
      <span class="token punctuation">}</span>
      <span class="token keyword">if</span> <span class="token punctuation">(</span>rowIndex <span class="token operator">===</span> <span class="token number">2</span> <span class="token operator">&amp;&amp;</span> columnIndex <span class="token operator">===</span> <span class="token number">3</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">return</span> <span class="token punctuation">[</span><span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
      <span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">;</span>

    <span class="token keyword">return</span> <span class="token punctuation">{</span> dataSource<span class="token punctuation">,</span> spanMethod <span class="token punctuation">}</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><!--]--></div></div><!--]--><div class="demo-block-control" data-v-2b1aa91d><i class="control-icon icon-caret-down" data-v-2b1aa91d></i><span style="display:none;" class="control-text" data-v-2b1aa91d>显示代码</span><div class="control-button-wrap" data-v-2b1aa91d><span style="display:none;" class="control-button copy-button" data-v-2b1aa91d>复制代码片段</span></div></div></div><h3 id="表头分组" tabindex="-1">表头分组 <a class="header-anchor" href="#表头分组" aria-hidden="true">#</a></h3><div class="demo-block demo-index" data-v-2b1aa91d><!--[--><div class="source" data-v-2b1aa91d><!--[--><div><div class="devui-table" style=""><div class="devui-table__container"><div class="hidden-columns"><!--[--><div><!--[--><!--[--><div><div></div></div><!--]--><!--[--><div><div></div></div><!--]--><!--]--></div><div><div></div></div><div><div></div></div><!--]--></div><table class="devui-table__view devui-table--sm" cellpadding="0" cellspacing="0"><colgroup><!--[--><!--]--></colgroup><thead class="devui-table__thead" style="position:relative;"><!--[--><tr><!--[--><!--]--></tr><!--]--></thead><tbody class="devui-table__tbody"><!--[--><!--]--><!----></tbody></table><!----></div></div></div><!--]--></div><div class="meta" data-v-2b1aa91d><div class="description" data-v-2b1aa91d><!--[--><div><code>d-column</code>嵌套<code>d-column</code>即可实现表头分组。</div><!--]--></div><div class="highlight" data-v-2b1aa91d><!--[--><div class="language-vue"><pre><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-table</span> <span class="token attr-name">:data</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>dataSource<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-column</span> <span class="token attr-name">field</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>name<span class="token punctuation">&quot;</span></span> <span class="token attr-name">header</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Name<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-column</span> <span class="token attr-name">field</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>firstName<span class="token punctuation">&quot;</span></span> <span class="token attr-name">header</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>First Name<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-column</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-column</span> <span class="token attr-name">field</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>lastName<span class="token punctuation">&quot;</span></span> <span class="token attr-name">header</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Last Name<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-column</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-column</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-column</span> <span class="token attr-name">field</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>gender<span class="token punctuation">&quot;</span></span> <span class="token attr-name">header</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Gender<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-column</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-column</span> <span class="token attr-name">field</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>date<span class="token punctuation">&quot;</span></span> <span class="token attr-name">header</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Date of birth<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-column</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-table</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
<span class="token keyword">import</span> <span class="token punctuation">{</span> defineComponent<span class="token punctuation">,</span> ref <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;vue&#39;</span><span class="token punctuation">;</span>

<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token function">defineComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  <span class="token function">setup</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">const</span> dataSource <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token punctuation">[</span>
      <span class="token punctuation">{</span>
        <span class="token literal-property property">firstName</span><span class="token operator">:</span> <span class="token string">&#39;Mark&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">lastName</span><span class="token operator">:</span> <span class="token string">&#39;Otto&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">date</span><span class="token operator">:</span> <span class="token string">&#39;1990/01/11&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">gender</span><span class="token operator">:</span> <span class="token string">&#39;Male&#39;</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">{</span>
        <span class="token literal-property property">firstName</span><span class="token operator">:</span> <span class="token string">&#39;Jacob&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">lastName</span><span class="token operator">:</span> <span class="token string">&#39;Thornton&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">gender</span><span class="token operator">:</span> <span class="token string">&#39;Female&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">date</span><span class="token operator">:</span> <span class="token string">&#39;1990/01/12&#39;</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">{</span>
        <span class="token literal-property property">firstName</span><span class="token operator">:</span> <span class="token string">&#39;Danni&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">lastName</span><span class="token operator">:</span> <span class="token string">&#39;Chen&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">gender</span><span class="token operator">:</span> <span class="token string">&#39;Male&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">date</span><span class="token operator">:</span> <span class="token string">&#39;1990/01/13&#39;</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">{</span>
        <span class="token literal-property property">firstName</span><span class="token operator">:</span> <span class="token string">&#39;green&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">lastName</span><span class="token operator">:</span> <span class="token string">&#39;gerong&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">gender</span><span class="token operator">:</span> <span class="token string">&#39;Male&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">date</span><span class="token operator">:</span> <span class="token string">&#39;1990/01/14&#39;</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

    <span class="token keyword">return</span> <span class="token punctuation">{</span> dataSource <span class="token punctuation">}</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><!--]--></div></div><!--]--><div class="demo-block-control" data-v-2b1aa91d><i class="control-icon icon-caret-down" data-v-2b1aa91d></i><span style="display:none;" class="control-text" data-v-2b1aa91d>显示代码</span><div class="control-button-wrap" data-v-2b1aa91d><span style="display:none;" class="control-button copy-button" data-v-2b1aa91d>复制代码片段</span></div></div></div><h3 id="列排序" tabindex="-1">列排序 <a class="header-anchor" href="#列排序" aria-hidden="true">#</a></h3><div class="demo-block demo-index" data-v-2b1aa91d><!--[--><div class="source" data-v-2b1aa91d><!--[--><div><div class="devui-table" style=""><div class="devui-table__container"><div class="hidden-columns"><!--[--><div><div></div></div><div><div></div></div><div><div></div></div><div><div></div></div><!--]--></div><table class="devui-table__view devui-table--sm" cellpadding="0" cellspacing="0"><colgroup><!--[--><!--]--></colgroup><thead class="devui-table__thead" style="position:relative;"><!--[--><tr><!--[--><!--]--></tr><!--]--></thead><tbody class="devui-table__tbody"><!--[--><!--]--><!----></tbody></table><!----></div></div></div><!--]--></div><div class="meta" data-v-2b1aa91d><div class="description" data-v-2b1aa91d><!--[--><div><code>sortable</code>参数设置为<code>true</code>可以支持列排序；<code>sort-direction</code>设置初始化时的排序方式；<code>sort-method</code>用来定义每一列的排序方法；<code>sort-change</code>是排序的回调事件，返回该列的排序信息：<code>field</code>排序字段和<code>direction</code>排序方向。</div><!--]--></div><div class="highlight" data-v-2b1aa91d><!--[--><div class="language-vue"><pre><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-table</span> <span class="token attr-name">:data</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>dataSource<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@sort-change</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>handleSortChange<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-column</span> <span class="token attr-name">field</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>firstName<span class="token punctuation">&quot;</span></span> <span class="token attr-name">header</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>First Name<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-column</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-column</span> <span class="token attr-name">field</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>lastName<span class="token punctuation">&quot;</span></span> <span class="token attr-name">header</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Last Name<span class="token punctuation">&quot;</span></span> <span class="token attr-name">sortable</span> <span class="token attr-name">:sort-method</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>sortNameMethod<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-column</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-column</span> <span class="token attr-name">field</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>gender<span class="token punctuation">&quot;</span></span> <span class="token attr-name">header</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Gender<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-column</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-column</span> <span class="token attr-name">field</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>date<span class="token punctuation">&quot;</span></span> <span class="token attr-name">header</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Date of birth<span class="token punctuation">&quot;</span></span> <span class="token attr-name">sortable</span> <span class="token attr-name">sort-direction</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>ASC<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:sort-method</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>sortDateMethod<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-column</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-table</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
<span class="token keyword">import</span> <span class="token punctuation">{</span> defineComponent<span class="token punctuation">,</span> ref <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;vue&#39;</span><span class="token punctuation">;</span>

<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token function">defineComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  <span class="token function">setup</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">const</span> dataSource <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token punctuation">[</span>
      <span class="token punctuation">{</span>
        <span class="token literal-property property">firstName</span><span class="token operator">:</span> <span class="token string">&#39;Jacob&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">lastName</span><span class="token operator">:</span> <span class="token string">&#39;Thornton&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">gender</span><span class="token operator">:</span> <span class="token string">&#39;Female&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">date</span><span class="token operator">:</span> <span class="token string">&#39;1990/01/12&#39;</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">{</span>
        <span class="token literal-property property">firstName</span><span class="token operator">:</span> <span class="token string">&#39;Mark&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">lastName</span><span class="token operator">:</span> <span class="token string">&#39;Otto&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">date</span><span class="token operator">:</span> <span class="token string">&#39;1990/01/11&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">gender</span><span class="token operator">:</span> <span class="token string">&#39;Male&#39;</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">{</span>
        <span class="token literal-property property">firstName</span><span class="token operator">:</span> <span class="token string">&#39;Danni&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">lastName</span><span class="token operator">:</span> <span class="token string">&#39;Chen&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">gender</span><span class="token operator">:</span> <span class="token string">&#39;Female&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">date</span><span class="token operator">:</span> <span class="token string">&#39;1990/01/13&#39;</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">{</span>
        <span class="token literal-property property">firstName</span><span class="token operator">:</span> <span class="token string">&#39;Green&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">lastName</span><span class="token operator">:</span> <span class="token string">&#39;Gerong&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">gender</span><span class="token operator">:</span> <span class="token string">&#39;Male&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">date</span><span class="token operator">:</span> <span class="token string">&#39;1990/01/14&#39;</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">const</span> <span class="token function-variable function">handleSortChange</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> field<span class="token punctuation">,</span> direction <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
      console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&#39;field&#39;</span><span class="token punctuation">,</span> field<span class="token punctuation">)</span><span class="token punctuation">;</span>
      console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&#39;direction&#39;</span><span class="token punctuation">,</span> direction<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">;</span>
    <span class="token keyword">const</span> <span class="token function-variable function">sortDateMethod</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">a<span class="token punctuation">,</span> b</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
      <span class="token keyword">return</span> a<span class="token punctuation">.</span>date <span class="token operator">&gt;</span> b<span class="token punctuation">.</span>date<span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">;</span>
    <span class="token keyword">const</span> <span class="token function-variable function">sortNameMethod</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">a<span class="token punctuation">,</span> b</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
      <span class="token keyword">return</span> a<span class="token punctuation">.</span>lastName <span class="token operator">&gt;</span> b<span class="token punctuation">.</span>lastName<span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">;</span>

    <span class="token keyword">return</span> <span class="token punctuation">{</span> dataSource<span class="token punctuation">,</span> handleSortChange<span class="token punctuation">,</span> sortDateMethod<span class="token punctuation">,</span> sortNameMethod <span class="token punctuation">}</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><!--]--></div></div><!--]--><div class="demo-block-control" data-v-2b1aa91d><i class="control-icon icon-caret-down" data-v-2b1aa91d></i><span style="display:none;" class="control-text" data-v-2b1aa91d>显示代码</span><div class="control-button-wrap" data-v-2b1aa91d><span style="display:none;" class="control-button copy-button" data-v-2b1aa91d>复制代码片段</span></div></div></div><h3 id="列筛选" tabindex="-1">列筛选 <a class="header-anchor" href="#列筛选" aria-hidden="true">#</a></h3><div class="demo-block demo-index" data-v-2b1aa91d><!--[--><div class="source" data-v-2b1aa91d><!--[--><div><div class="devui-table" style=""><div class="devui-table__container"><div class="hidden-columns"><!--[--><div><div></div></div><div><div></div></div><div><div></div></div><div><div></div></div><!--]--></div><table class="devui-table__view devui-table--sm" cellpadding="0" cellspacing="0"><colgroup><!--[--><!--]--></colgroup><thead class="devui-table__thead" style="position:relative;"><!--[--><tr><!--[--><!--]--></tr><!--]--></thead><tbody class="devui-table__tbody"><!--[--><!--]--><!----></tbody></table><!----></div></div></div><!--]--></div><div class="meta" data-v-2b1aa91d><div class="description" data-v-2b1aa91d><!--[--><div><code>filterable</code>参数设置为<code>true</code>可以支持列筛选；<code>filter-multiple</code>设置筛选列表是否可多选，默认为<code>true</code>；<code>filter-list</code>用来定义筛选列表；<code>filter-change</code>是筛选的回调事件，返回该列选中的数据：单选时返回选中项，多选时返回选中项数组。</div><!--]--></div><div class="highlight" data-v-2b1aa91d><!--[--><div class="language-vue"><pre><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-table</span> <span class="token attr-name">:data</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>dataSource<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-column</span> <span class="token attr-name">field</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>firstName<span class="token punctuation">&quot;</span></span> <span class="token attr-name">header</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>First Name<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-column</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-column</span> <span class="token attr-name">field</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>lastName<span class="token punctuation">&quot;</span></span> <span class="token attr-name">header</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Last Name<span class="token punctuation">&quot;</span></span> <span class="token attr-name">filterable</span> <span class="token attr-name">:filter-list</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>filterList<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@filter-change</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>handleFilterChange<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-column</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-column</span>
      <span class="token attr-name">field</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>gender<span class="token punctuation">&quot;</span></span>
      <span class="token attr-name">header</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Gender<span class="token punctuation">&quot;</span></span>
      <span class="token attr-name">filterable</span>
      <span class="token attr-name">:filter-multiple</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>false<span class="token punctuation">&quot;</span></span>
      <span class="token attr-name">:filter-list</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>singleFilterList<span class="token punctuation">&quot;</span></span>
      <span class="token attr-name">@filter-change</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>handleSingleChange<span class="token punctuation">&quot;</span></span>
    <span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-column</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-column</span> <span class="token attr-name">field</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>date<span class="token punctuation">&quot;</span></span> <span class="token attr-name">header</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Date of birth<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-column</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-table</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
<span class="token keyword">import</span> <span class="token punctuation">{</span> defineComponent<span class="token punctuation">,</span> ref <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;vue&#39;</span><span class="token punctuation">;</span>

<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token function">defineComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  <span class="token function">setup</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">const</span> originSource <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token punctuation">[</span>
      <span class="token punctuation">{</span>
        <span class="token literal-property property">firstName</span><span class="token operator">:</span> <span class="token string">&#39;Jacob&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">lastName</span><span class="token operator">:</span> <span class="token string">&#39;Thornton&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">gender</span><span class="token operator">:</span> <span class="token string">&#39;Female&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">date</span><span class="token operator">:</span> <span class="token string">&#39;1990/01/12&#39;</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">{</span>
        <span class="token literal-property property">firstName</span><span class="token operator">:</span> <span class="token string">&#39;Mark&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">lastName</span><span class="token operator">:</span> <span class="token string">&#39;Otto&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">date</span><span class="token operator">:</span> <span class="token string">&#39;1990/01/11&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">gender</span><span class="token operator">:</span> <span class="token string">&#39;Male&#39;</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">{</span>
        <span class="token literal-property property">firstName</span><span class="token operator">:</span> <span class="token string">&#39;Danni&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">lastName</span><span class="token operator">:</span> <span class="token string">&#39;Chen&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">gender</span><span class="token operator">:</span> <span class="token string">&#39;Female&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">date</span><span class="token operator">:</span> <span class="token string">&#39;1990/01/13&#39;</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">{</span>
        <span class="token literal-property property">firstName</span><span class="token operator">:</span> <span class="token string">&#39;Green&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">lastName</span><span class="token operator">:</span> <span class="token string">&#39;Gerong&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">gender</span><span class="token operator">:</span> <span class="token string">&#39;Male&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">date</span><span class="token operator">:</span> <span class="token string">&#39;1990/01/14&#39;</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">const</span> dataSource <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token operator">...</span>originSource<span class="token punctuation">.</span>value<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">const</span> filterList <span class="token operator">=</span> dataSource<span class="token punctuation">.</span>value<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">item</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
      <span class="token keyword">return</span> <span class="token punctuation">{</span> <span class="token literal-property property">name</span><span class="token operator">:</span> item<span class="token punctuation">.</span>lastName<span class="token punctuation">,</span> <span class="token literal-property property">value</span><span class="token operator">:</span> item<span class="token punctuation">.</span>lastName <span class="token punctuation">}</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">const</span> singleFilterList <span class="token operator">=</span> <span class="token punctuation">[</span>
      <span class="token punctuation">{</span>
        <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;Clear&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">&#39;Clear&#39;</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">{</span>
        <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;Female&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">&#39;Female&#39;</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">{</span>
        <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;Male&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">&#39;Male&#39;</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">]</span><span class="token punctuation">;</span>
    <span class="token keyword">const</span> <span class="token function-variable function">handleFilterChange</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">val</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
      <span class="token keyword">const</span> filterList <span class="token operator">=</span> val<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">item</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> item<span class="token punctuation">.</span>value<span class="token punctuation">)</span><span class="token punctuation">;</span>
      dataSource<span class="token punctuation">.</span>value <span class="token operator">=</span> originSource<span class="token punctuation">.</span>value<span class="token punctuation">.</span><span class="token function">filter</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">item</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> filterList<span class="token punctuation">.</span><span class="token function">includes</span><span class="token punctuation">(</span>item<span class="token punctuation">.</span>lastName<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">;</span>
    <span class="token keyword">const</span> <span class="token function-variable function">handleSingleChange</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">val</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
      <span class="token keyword">if</span> <span class="token punctuation">(</span>val<span class="token punctuation">.</span>value <span class="token operator">===</span> <span class="token string">&#39;Clear&#39;</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        dataSource<span class="token punctuation">.</span>value <span class="token operator">=</span> originSource<span class="token punctuation">.</span>value<span class="token punctuation">;</span>
        <span class="token keyword">return</span><span class="token punctuation">;</span>
      <span class="token punctuation">}</span>
      dataSource<span class="token punctuation">.</span>value <span class="token operator">=</span> originSource<span class="token punctuation">.</span>value<span class="token punctuation">.</span><span class="token function">filter</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">item</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> item<span class="token punctuation">.</span>gender <span class="token operator">===</span> val<span class="token punctuation">.</span>value<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">;</span>

    <span class="token keyword">return</span> <span class="token punctuation">{</span> dataSource<span class="token punctuation">,</span> filterList<span class="token punctuation">,</span> singleFilterList<span class="token punctuation">,</span> handleFilterChange<span class="token punctuation">,</span> handleSingleChange <span class="token punctuation">}</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><!--]--></div></div><!--]--><div class="demo-block-control" data-v-2b1aa91d><i class="control-icon icon-caret-down" data-v-2b1aa91d></i><span style="display:none;" class="control-text" data-v-2b1aa91d>显示代码</span><div class="control-button-wrap" data-v-2b1aa91d><span style="display:none;" class="control-button copy-button" data-v-2b1aa91d>复制代码片段</span></div></div></div><h3 id="展开行" tabindex="-1">展开行 <a class="header-anchor" href="#展开行" aria-hidden="true">#</a></h3><div class="demo-block demo-index" data-v-2b1aa91d><!--[--><div class="source" data-v-2b1aa91d><!--[--><div><div><button class="devui-button devui-button--outline devui-button--outline--secondary devui-button--md mr-m mb-m"><div class="loading-icon__container" style="display:none;"><div class="devui-icon__container devui-icon--no-slots button-icon-loading"><!----><i class="icon icon-loading button-icon-loading" style="font-size:inherit;color:#BBDEFB;transform:rotate(undefineddeg);"></i><!----></div></div><span class="button-content"><!--[-->toggleRowExpansion<!--]--></span></button><div class="devui-table" style=""><div class="devui-table__container"><div class="hidden-columns"><!--[--><div><!--[--><!--]--></div><div><div></div></div><div><div></div></div><div><div></div></div><div><div></div></div><!--]--></div><table class="devui-table__view devui-table--sm" cellpadding="0" cellspacing="0"><colgroup><!--[--><!--]--></colgroup><thead class="devui-table__thead" style="position:relative;"><!--[--><tr><!--[--><!--]--></tr><!--]--></thead><tbody class="devui-table__tbody"><!--[--><!--]--><!----></tbody></table><!----></div></div></div></div><!--]--></div><div class="meta" data-v-2b1aa91d><!----><div class="highlight" data-v-2b1aa91d><!--[--><div class="language-vue"><pre><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-button</span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>toggleRowExpansion<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mr-m mb-m<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>toggleRowExpansion<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-button</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-table</span> <span class="token attr-name">ref</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>tableRef<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:data</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>dataSource<span class="token punctuation">&quot;</span></span> <span class="token attr-name">row-key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>id<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:expand-row-keys</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>[&#39;1&#39;, &#39;3&#39;]<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@expand-change</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>expandChange<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-column</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>expand<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">#default</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>rowData<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span>First Name: {{ rowData.row.firstName }}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span>Last Name: {{ rowData.row.lastName }}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span>Gender: {{ rowData.row.gender }}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span>Date of birth: {{ rowData.row.date }}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-column</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-column</span> <span class="token attr-name">field</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>firstName<span class="token punctuation">&quot;</span></span> <span class="token attr-name">header</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>First Name<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-column</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-column</span> <span class="token attr-name">field</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>lastName<span class="token punctuation">&quot;</span></span> <span class="token attr-name">header</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Last Name<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-column</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-column</span> <span class="token attr-name">field</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>gender<span class="token punctuation">&quot;</span></span> <span class="token attr-name">header</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Gender<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-column</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-column</span> <span class="token attr-name">field</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>date<span class="token punctuation">&quot;</span></span> <span class="token attr-name">header</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Date of birth<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-column</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-table</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
<span class="token keyword">import</span> <span class="token punctuation">{</span> defineComponent<span class="token punctuation">,</span> ref<span class="token punctuation">,</span> onMounted <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;vue&#39;</span><span class="token punctuation">;</span>

<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token function">defineComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  <span class="token function">setup</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">const</span> tableRef <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

    <span class="token keyword">const</span> dataSource <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token punctuation">[</span>
      <span class="token punctuation">{</span>
        <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token string">&#39;1&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">firstName</span><span class="token operator">:</span> <span class="token string">&#39;Jacob&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">lastName</span><span class="token operator">:</span> <span class="token string">&#39;Thornton&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">gender</span><span class="token operator">:</span> <span class="token string">&#39;Female&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">date</span><span class="token operator">:</span> <span class="token string">&#39;1990/01/12&#39;</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">{</span>
        <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token string">&#39;2&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">firstName</span><span class="token operator">:</span> <span class="token string">&#39;Mark&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">lastName</span><span class="token operator">:</span> <span class="token string">&#39;Otto&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">date</span><span class="token operator">:</span> <span class="token string">&#39;1990/01/11&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">gender</span><span class="token operator">:</span> <span class="token string">&#39;Male&#39;</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">{</span>
        <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token string">&#39;3&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">firstName</span><span class="token operator">:</span> <span class="token string">&#39;Danni&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">lastName</span><span class="token operator">:</span> <span class="token string">&#39;Chen&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">gender</span><span class="token operator">:</span> <span class="token string">&#39;Female&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">date</span><span class="token operator">:</span> <span class="token string">&#39;1990/01/13&#39;</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">{</span>
        <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token string">&#39;4&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">firstName</span><span class="token operator">:</span> <span class="token string">&#39;Green&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">lastName</span><span class="token operator">:</span> <span class="token string">&#39;Gerong&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">gender</span><span class="token operator">:</span> <span class="token string">&#39;Male&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">date</span><span class="token operator">:</span> <span class="token string">&#39;1990/01/14&#39;</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

    <span class="token comment">/* onMounted(() =&gt; {
      tableRef.value.store.expandRow(dataSource.value[0]);
    }); */</span>

    <span class="token keyword">const</span> <span class="token function-variable function">expandChange</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">currentRow<span class="token punctuation">,</span> expandedRows</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
      console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&#39;currentRow&#39;</span><span class="token punctuation">,</span> currentRow<span class="token punctuation">)</span><span class="token punctuation">;</span>
      console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&#39;expandedRows&#39;</span><span class="token punctuation">,</span> expandedRows<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">;</span>

    <span class="token keyword">const</span> <span class="token function-variable function">toggleRowExpansion</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
      tableRef<span class="token punctuation">.</span>value<span class="token punctuation">.</span>store<span class="token punctuation">.</span><span class="token function">toggleRowExpansion</span><span class="token punctuation">(</span>dataSource<span class="token punctuation">.</span>value<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">;</span>

    <span class="token keyword">return</span> <span class="token punctuation">{</span> dataSource<span class="token punctuation">,</span> expandChange<span class="token punctuation">,</span> tableRef<span class="token punctuation">,</span> toggleRowExpansion <span class="token punctuation">}</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><!--]--></div></div><!--]--><div class="demo-block-control" data-v-2b1aa91d><i class="control-icon icon-caret-down" data-v-2b1aa91d></i><span style="display:none;" class="control-text" data-v-2b1aa91d>显示代码</span><div class="control-button-wrap" data-v-2b1aa91d><span style="display:none;" class="control-button copy-button" data-v-2b1aa91d>复制代码片段</span></div></div></div><h3 id="树形表格" tabindex="-1">树形表格 <a class="header-anchor" href="#树形表格" aria-hidden="true">#</a></h3><div class="demo-block demo-index" data-v-2b1aa91d><!--[--><div class="source" data-v-2b1aa91d><!--[--><div><div class="devui-table" style=""><div class="devui-table__container"><div class="hidden-columns"><!--[--><div><!--[--><!--]--></div><div><div></div></div><div><div></div></div><div><div></div></div><div><div></div></div><!--]--></div><table class="devui-table__view devui-table--sm" cellpadding="0" cellspacing="0"><colgroup><!--[--><!--]--></colgroup><thead class="devui-table__thead" style="position:relative;"><!--[--><tr><!--[--><!--]--></tr><!--]--></thead><tbody class="devui-table__tbody"><!--[--><!--]--><!----></tbody></table><!----></div></div></div><!--]--></div><div class="meta" data-v-2b1aa91d><div class="description" data-v-2b1aa91d><!--[--><div>支持树类型的数据展示。当 row 中包含<code>children</code>字段时，被视为树形数据。渲染嵌套数据需要<code>row-key</code>。使用<code>indent</code>可以控制子节点的缩进。暂不支持树形表格和展开行同时使用，展开行优先级较高。</div><!--]--></div><div class="highlight" data-v-2b1aa91d><!--[--><div class="language-vue"><pre><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-table</span> <span class="token attr-name">:indent</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>32<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@check-change</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>treeCheckChange<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:data</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>baseTreeTableData<span class="token punctuation">&quot;</span></span> <span class="token attr-name">row-key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>firstName<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-column</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>index<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">#default</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>scope<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
        {{ `No.${scope.rowIndex + 1}` }}
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-column</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-column</span> <span class="token attr-name">field</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>firstName<span class="token punctuation">&quot;</span></span> <span class="token attr-name">header</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>First Name<span class="token punctuation">&quot;</span></span> <span class="token attr-name">show-overflow-tooltip</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-column</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-column</span> <span class="token attr-name">field</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>lastName<span class="token punctuation">&quot;</span></span> <span class="token attr-name">header</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Last Name<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-column</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-column</span> <span class="token attr-name">field</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>gender<span class="token punctuation">&quot;</span></span> <span class="token attr-name">header</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Gender<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-column</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-column</span> <span class="token attr-name">field</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>date<span class="token punctuation">&quot;</span></span> <span class="token attr-name">header</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Date of birth<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-column</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-table</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
<span class="token keyword">import</span> <span class="token punctuation">{</span> defineComponent<span class="token punctuation">,</span> ref <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;vue&#39;</span><span class="token punctuation">;</span>

<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token function">defineComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  <span class="token function">setup</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">const</span> baseTreeTableData <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token punctuation">[</span>
      <span class="token punctuation">{</span>
        <span class="token literal-property property">firstName</span><span class="token operator">:</span> <span class="token string">&#39;Mark1&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">lastName</span><span class="token operator">:</span> <span class="token string">&#39;Otto&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">date</span><span class="token operator">:</span> <span class="token string">&#39;1990/01/11&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">gender</span><span class="token operator">:</span> <span class="token string">&#39;Male1&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">children</span><span class="token operator">:</span> <span class="token punctuation">[</span>
          <span class="token punctuation">{</span>
            <span class="token literal-property property">firstName</span><span class="token operator">:</span> <span class="token string">&#39;Mark2&#39;</span><span class="token punctuation">,</span>
            <span class="token literal-property property">lastName</span><span class="token operator">:</span> <span class="token string">&#39;Otto&#39;</span><span class="token punctuation">,</span>
            <span class="token literal-property property">date</span><span class="token operator">:</span> <span class="token string">&#39;1990/01/11&#39;</span><span class="token punctuation">,</span>
            <span class="token literal-property property">gender</span><span class="token operator">:</span> <span class="token string">&#39;Male&#39;</span><span class="token punctuation">,</span>
          <span class="token punctuation">}</span><span class="token punctuation">,</span>
          <span class="token punctuation">{</span>
            <span class="token literal-property property">firstName</span><span class="token operator">:</span> <span class="token string">&#39;Mark3&#39;</span><span class="token punctuation">,</span>
            <span class="token literal-property property">lastName</span><span class="token operator">:</span> <span class="token string">&#39;Otto&#39;</span><span class="token punctuation">,</span>
            <span class="token literal-property property">date</span><span class="token operator">:</span> <span class="token string">&#39;1990/01/11&#39;</span><span class="token punctuation">,</span>
            <span class="token literal-property property">gender</span><span class="token operator">:</span> <span class="token string">&#39;Male&#39;</span><span class="token punctuation">,</span>
            <span class="token literal-property property">children</span><span class="token operator">:</span> <span class="token punctuation">[</span>
              <span class="token punctuation">{</span>
                <span class="token literal-property property">firstName</span><span class="token operator">:</span> <span class="token string">&#39;Mark31&#39;</span><span class="token punctuation">,</span>
                <span class="token literal-property property">lastName</span><span class="token operator">:</span> <span class="token string">&#39;Otto&#39;</span><span class="token punctuation">,</span>
                <span class="token literal-property property">date</span><span class="token operator">:</span> <span class="token string">&#39;1990/01/11&#39;</span><span class="token punctuation">,</span>
                <span class="token literal-property property">gender</span><span class="token operator">:</span> <span class="token string">&#39;Male&#39;</span><span class="token punctuation">,</span>
              <span class="token punctuation">}</span><span class="token punctuation">,</span>
              <span class="token punctuation">{</span>
                <span class="token literal-property property">firstName</span><span class="token operator">:</span> <span class="token string">&#39;Mark32&#39;</span><span class="token punctuation">,</span>
                <span class="token literal-property property">lastName</span><span class="token operator">:</span> <span class="token string">&#39;Otto&#39;</span><span class="token punctuation">,</span>
                <span class="token literal-property property">date</span><span class="token operator">:</span> <span class="token string">&#39;1990/01/11&#39;</span><span class="token punctuation">,</span>
                <span class="token literal-property property">gender</span><span class="token operator">:</span> <span class="token string">&#39;Male&#39;</span><span class="token punctuation">,</span>
              <span class="token punctuation">}</span><span class="token punctuation">,</span>
            <span class="token punctuation">]</span><span class="token punctuation">,</span>
          <span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token punctuation">]</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">{</span>
        <span class="token literal-property property">firstName</span><span class="token operator">:</span> <span class="token string">&#39;Jacob&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">lastName</span><span class="token operator">:</span> <span class="token string">&#39;Thornton&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">gender</span><span class="token operator">:</span> <span class="token string">&#39;Female&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">date</span><span class="token operator">:</span> <span class="token string">&#39;1990/01/12&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">children</span><span class="token operator">:</span> <span class="token punctuation">[</span>
          <span class="token punctuation">{</span>
            <span class="token literal-property property">firstName</span><span class="token operator">:</span> <span class="token string">&#39;Jacob2&#39;</span><span class="token punctuation">,</span>
            <span class="token literal-property property">lastName</span><span class="token operator">:</span> <span class="token string">&#39;Otto&#39;</span><span class="token punctuation">,</span>
            <span class="token literal-property property">date</span><span class="token operator">:</span> <span class="token string">&#39;1990/01/11&#39;</span><span class="token punctuation">,</span>
            <span class="token literal-property property">gender</span><span class="token operator">:</span> <span class="token string">&#39;Male&#39;</span><span class="token punctuation">,</span>
          <span class="token punctuation">}</span><span class="token punctuation">,</span>
          <span class="token punctuation">{</span>
            <span class="token literal-property property">firstName</span><span class="token operator">:</span> <span class="token string">&#39;Jacob3&#39;</span><span class="token punctuation">,</span>
            <span class="token literal-property property">lastName</span><span class="token operator">:</span> <span class="token string">&#39;Otto&#39;</span><span class="token punctuation">,</span>
            <span class="token literal-property property">date</span><span class="token operator">:</span> <span class="token string">&#39;1990/01/11&#39;</span><span class="token punctuation">,</span>
            <span class="token literal-property property">gender</span><span class="token operator">:</span> <span class="token string">&#39;Male&#39;</span><span class="token punctuation">,</span>
            <span class="token literal-property property">children</span><span class="token operator">:</span> <span class="token punctuation">[</span>
              <span class="token punctuation">{</span>
                <span class="token literal-property property">firstName</span><span class="token operator">:</span> <span class="token string">&#39;Jacob31&#39;</span><span class="token punctuation">,</span>
                <span class="token literal-property property">lastName</span><span class="token operator">:</span> <span class="token string">&#39;Otto&#39;</span><span class="token punctuation">,</span>
                <span class="token literal-property property">date</span><span class="token operator">:</span> <span class="token string">&#39;1990/01/11&#39;</span><span class="token punctuation">,</span>
                <span class="token literal-property property">gender</span><span class="token operator">:</span> <span class="token string">&#39;Male&#39;</span><span class="token punctuation">,</span>
              <span class="token punctuation">}</span><span class="token punctuation">,</span>
              <span class="token punctuation">{</span>
                <span class="token literal-property property">firstName</span><span class="token operator">:</span> <span class="token string">&#39;Jacob32&#39;</span><span class="token punctuation">,</span>
                <span class="token literal-property property">lastName</span><span class="token operator">:</span> <span class="token string">&#39;Otto&#39;</span><span class="token punctuation">,</span>
                <span class="token literal-property property">date</span><span class="token operator">:</span> <span class="token string">&#39;1990/01/11&#39;</span><span class="token punctuation">,</span>
                <span class="token literal-property property">gender</span><span class="token operator">:</span> <span class="token string">&#39;Male&#39;</span><span class="token punctuation">,</span>
              <span class="token punctuation">}</span><span class="token punctuation">,</span>
            <span class="token punctuation">]</span><span class="token punctuation">,</span>
          <span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token punctuation">]</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">{</span>
        <span class="token literal-property property">firstName</span><span class="token operator">:</span> <span class="token string">&#39;Danni&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">lastName</span><span class="token operator">:</span> <span class="token string">&#39;Chen&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">gender</span><span class="token operator">:</span> <span class="token string">&#39;Male&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">date</span><span class="token operator">:</span> <span class="token string">&#39;1990/01/13&#39;</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">{</span>
        <span class="token literal-property property">firstName</span><span class="token operator">:</span> <span class="token string">&#39;green&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">lastName</span><span class="token operator">:</span> <span class="token string">&#39;gerong&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">gender</span><span class="token operator">:</span> <span class="token string">&#39;Male&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">date</span><span class="token operator">:</span> <span class="token string">&#39;1990/01/14&#39;</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

    <span class="token keyword">const</span> <span class="token function-variable function">treeCheckChange</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">val<span class="token punctuation">,</span> row<span class="token punctuation">,</span> selection</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
      console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&#39;treeCheckChange&#39;</span><span class="token punctuation">,</span> selection<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">;</span>

    <span class="token keyword">return</span> <span class="token punctuation">{</span> baseTreeTableData<span class="token punctuation">,</span> treeCheckChange <span class="token punctuation">}</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><!--]--></div></div><!--]--><div class="demo-block-control" data-v-2b1aa91d><i class="control-icon icon-caret-down" data-v-2b1aa91d></i><span style="display:none;" class="control-text" data-v-2b1aa91d>显示代码</span><div class="control-button-wrap" data-v-2b1aa91d><span style="display:none;" class="control-button copy-button" data-v-2b1aa91d>复制代码片段</span></div></div></div><h3 id="懒加载" tabindex="-1">懒加载 <a class="header-anchor" href="#懒加载" aria-hidden="true">#</a></h3><div class="demo-block demo-index" data-v-2b1aa91d><!--[--><div class="source" data-v-2b1aa91d><!--[--><div><div class="devui-table" style="height:200px;"><div class="devui-table__container"><div class="hidden-columns"><!--[--><div><div></div></div><div><div></div></div><div><div></div></div><div><div></div></div><!--]--></div><table class="devui-table__view devui-table--sm" cellpadding="0" cellspacing="0"><colgroup><!--[--><!--]--></colgroup><thead class="devui-table__thead" style="position:relative;"><!--[--><tr><!--[--><!--]--></tr><!--]--></thead><tbody class="devui-table__tbody"><!--[--><!--]--><span class="devui-table__lazy__flag"></span></tbody></table><!----></div></div></div><!--]--></div><div class="meta" data-v-2b1aa91d><div class="description" data-v-2b1aa91d><!--[--><div>使用 lazy 启用懒加载，当滚动表格底部时到触发 loadMore 事件实现懒加载。</div><!--]--></div><div class="highlight" data-v-2b1aa91d><!--[--><div class="language-vue"><pre><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-table</span> <span class="token attr-name">:data</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>dataSource<span class="token punctuation">&quot;</span></span> <span class="token attr-name">table-height</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>200px<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:show-loading</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>showLoading<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:lazy</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>true<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@load-more</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>loadMore<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-column</span> <span class="token attr-name">field</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>firstName<span class="token punctuation">&quot;</span></span> <span class="token attr-name">header</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>First Name<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-column</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-column</span> <span class="token attr-name">field</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>lastName<span class="token punctuation">&quot;</span></span> <span class="token attr-name">header</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Last Name<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-column</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-column</span> <span class="token attr-name">field</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>gender<span class="token punctuation">&quot;</span></span> <span class="token attr-name">header</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Gender<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-column</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-column</span> <span class="token attr-name">field</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>date<span class="token punctuation">&quot;</span></span> <span class="token attr-name">header</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Date of birth<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-column</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-table</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
<span class="token keyword">import</span> <span class="token punctuation">{</span> defineComponent<span class="token punctuation">,</span> ref <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;vue&#39;</span><span class="token punctuation">;</span>

<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token function">defineComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  <span class="token function">setup</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">const</span> showLoading <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token boolean">false</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">const</span> dataSource <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token punctuation">[</span>
      <span class="token punctuation">{</span>
        <span class="token literal-property property">firstName</span><span class="token operator">:</span> <span class="token string">&#39;diy0&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">lastName</span><span class="token operator">:</span> <span class="token string">&#39;Otto&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">date</span><span class="token operator">:</span> <span class="token string">&#39;1990/01/11&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">gender</span><span class="token operator">:</span> <span class="token string">&#39;Male&#39;</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">{</span>
        <span class="token literal-property property">firstName</span><span class="token operator">:</span> <span class="token string">&#39;diy1&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">lastName</span><span class="token operator">:</span> <span class="token string">&#39;Otto&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">date</span><span class="token operator">:</span> <span class="token string">&#39;1990/01/11&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">gender</span><span class="token operator">:</span> <span class="token string">&#39;Male&#39;</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">{</span>
        <span class="token literal-property property">firstName</span><span class="token operator">:</span> <span class="token string">&#39;diy2&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">lastName</span><span class="token operator">:</span> <span class="token string">&#39;Thornton&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">gender</span><span class="token operator">:</span> <span class="token string">&#39;Female&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">date</span><span class="token operator">:</span> <span class="token string">&#39;1990/01/12&#39;</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">{</span>
        <span class="token literal-property property">firstName</span><span class="token operator">:</span> <span class="token string">&#39;diy3&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">lastName</span><span class="token operator">:</span> <span class="token string">&#39;Chen&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">gender</span><span class="token operator">:</span> <span class="token string">&#39;Male&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">date</span><span class="token operator">:</span> <span class="token string">&#39;1990/01/13&#39;</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">{</span>
        <span class="token literal-property property">firstName</span><span class="token operator">:</span> <span class="token string">&#39;diy4&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">lastName</span><span class="token operator">:</span> <span class="token string">&#39;gerong&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">gender</span><span class="token operator">:</span> <span class="token string">&#39;Male&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">date</span><span class="token operator">:</span> <span class="token string">&#39;1990/01/14&#39;</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">{</span>
        <span class="token literal-property property">firstName</span><span class="token operator">:</span> <span class="token string">&#39;diy5&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">lastName</span><span class="token operator">:</span> <span class="token string">&#39;lang&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">gender</span><span class="token operator">:</span> <span class="token string">&#39;Male&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">date</span><span class="token operator">:</span> <span class="token string">&#39;1990/01/14&#39;</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">{</span>
        <span class="token literal-property property">firstName</span><span class="token operator">:</span> <span class="token string">&#39;diy6&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">lastName</span><span class="token operator">:</span> <span class="token string">&#39;li&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">gender</span><span class="token operator">:</span> <span class="token string">&#39;Male&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">date</span><span class="token operator">:</span> <span class="token string">&#39;1990/01/14&#39;</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">{</span>
        <span class="token literal-property property">firstName</span><span class="token operator">:</span> <span class="token string">&#39;diy7&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">lastName</span><span class="token operator">:</span> <span class="token string">&#39;li&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">gender</span><span class="token operator">:</span> <span class="token string">&#39;Female&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">date</span><span class="token operator">:</span> <span class="token string">&#39;1990/01/14&#39;</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">{</span>
        <span class="token literal-property property">firstName</span><span class="token operator">:</span> <span class="token string">&#39;diy8&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">lastName</span><span class="token operator">:</span> <span class="token string">&#39;Yu&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">gender</span><span class="token operator">:</span> <span class="token string">&#39;Female&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">date</span><span class="token operator">:</span> <span class="token string">&#39;1990/01/14&#39;</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">{</span>
        <span class="token literal-property property">firstName</span><span class="token operator">:</span> <span class="token string">&#39;diy9&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">lastName</span><span class="token operator">:</span> <span class="token string">&#39;Yu&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">gender</span><span class="token operator">:</span> <span class="token string">&#39;Female&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">date</span><span class="token operator">:</span> <span class="token string">&#39;1990/01/14&#39;</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

    <span class="token keyword">let</span> total <span class="token operator">=</span> <span class="token number">100</span><span class="token punctuation">;</span>

    <span class="token keyword">const</span> <span class="token function-variable function">loadMore</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
      <span class="token keyword">if</span> <span class="token punctuation">(</span>dataSource<span class="token punctuation">.</span>value<span class="token punctuation">.</span>length <span class="token operator">&gt;=</span> total <span class="token operator">||</span> showLoading<span class="token punctuation">.</span>value<span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">return</span><span class="token punctuation">;</span>
      <span class="token punctuation">}</span>

      showLoading<span class="token punctuation">.</span>value <span class="token operator">=</span> <span class="token boolean">true</span><span class="token punctuation">;</span>
      <span class="token keyword">const</span> moreData <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
      <span class="token keyword">const</span> size <span class="token operator">=</span> dataSource<span class="token punctuation">.</span>value<span class="token punctuation">.</span>length<span class="token punctuation">;</span>
      <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator">&lt;</span> <span class="token number">10</span><span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        moreData<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
          <span class="token literal-property property">firstName</span><span class="token operator">:</span> <span class="token string">&#39;diy&#39;</span> <span class="token operator">+</span> <span class="token punctuation">(</span>i <span class="token operator">+</span> size<span class="token punctuation">)</span><span class="token punctuation">,</span>
          <span class="token literal-property property">lastName</span><span class="token operator">:</span> <span class="token string">&#39;more data&#39;</span><span class="token punctuation">,</span>
          <span class="token literal-property property">gender</span><span class="token operator">:</span> <span class="token string">&#39;Female&#39;</span><span class="token punctuation">,</span>
          <span class="token literal-property property">date</span><span class="token operator">:</span> <span class="token string">&#39;2022/07/20&#39;</span><span class="token punctuation">,</span>
        <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token punctuation">}</span>

      <span class="token comment">// mock ajax</span>
      <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
        showLoading<span class="token punctuation">.</span>value <span class="token operator">=</span> <span class="token boolean">false</span><span class="token punctuation">;</span>
        dataSource<span class="token punctuation">.</span>value <span class="token operator">=</span> dataSource<span class="token punctuation">.</span>value<span class="token punctuation">.</span><span class="token function">concat</span><span class="token punctuation">(</span>moreData<span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">500</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">;</span>

    <span class="token keyword">return</span> <span class="token punctuation">{</span> dataSource<span class="token punctuation">,</span> loadMore<span class="token punctuation">,</span> showLoading <span class="token punctuation">}</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><!--]--></div></div><!--]--><div class="demo-block-control" data-v-2b1aa91d><i class="control-icon icon-caret-down" data-v-2b1aa91d></i><span style="display:none;" class="control-text" data-v-2b1aa91d>显示代码</span><div class="control-button-wrap" data-v-2b1aa91d><span style="display:none;" class="control-button copy-button" data-v-2b1aa91d>复制代码片段</span></div></div></div><h3 id="table-参数" tabindex="-1">Table 参数 <a class="header-anchor" href="#table-参数" aria-hidden="true">#</a></h3><table><thead><tr><th style="text-align:left;">参数名</th><th style="text-align:left;">类型</th><th style="text-align:left;">默认值</th><th style="text-align:left;">说明</th><th style="text-align:left;">跳转 Demo</th></tr></thead><tbody><tr><td style="text-align:left;">data</td><td style="text-align:left;"><code>array</code></td><td style="text-align:left;">[]</td><td style="text-align:left;">可选，显示的数据</td><td style="text-align:left;"><a href="#%E5%9F%BA%E6%9C%AC%E7%94%A8%E6%B3%95">基本用法</a></td></tr><tr><td style="text-align:left;">striped</td><td style="text-align:left;"><code>boolean</code></td><td style="text-align:left;">false</td><td style="text-align:left;">可选，是否显示斑马纹间隔</td><td style="text-align:left;"><a href="#%E8%A1%A8%E6%A0%BC%E6%A0%B7%E5%BC%8F">表格样式</a></td></tr><tr><td style="text-align:left;">size</td><td style="text-align:left;"><a href="#tablesize">TableSize</a></td><td style="text-align:left;">&#39;sm&#39;</td><td style="text-align:left;">可选，表格大小，分别对应行高 40px,48px,56px</td><td style="text-align:left;"><a href="#%E8%A1%A8%E6%A0%BC%E6%A0%B7%E5%BC%8F">表格样式</a></td></tr><tr><td style="text-align:left;">max-width</td><td style="text-align:left;"><code>string</code></td><td style="text-align:left;">--</td><td style="text-align:left;">可选，表格最大宽度</td><td style="text-align:left;"></td></tr><tr><td style="text-align:left;">max-height</td><td style="text-align:left;"><code>boolean</code></td><td style="text-align:left;">--</td><td style="text-align:left;">可选，表格最大高度</td><td style="text-align:left;"></td></tr><tr><td style="text-align:left;">table-width</td><td style="text-align:left;"><code>string</code></td><td style="text-align:left;">--</td><td style="text-align:left;">可选，表格宽度</td><td style="text-align:left;"></td></tr><tr><td style="text-align:left;">table-height</td><td style="text-align:left;"><code>string</code></td><td style="text-align:left;">--</td><td style="text-align:left;">可选，表格高度</td><td style="text-align:left;"></td></tr><tr><td style="text-align:left;">row-hovered-highlight</td><td style="text-align:left;"><code>boolean</code></td><td style="text-align:left;">true</td><td style="text-align:left;">可选，鼠标在该行上时，高亮该行</td><td style="text-align:left;"><a href="#%E8%A1%A8%E6%A0%BC%E6%A0%B7%E5%BC%8F">表格样式</a></td></tr><tr><td style="text-align:left;">fix-header</td><td style="text-align:left;"><code>boolean</code></td><td style="text-align:left;">false</td><td style="text-align:left;">可选，固定头部</td><td style="text-align:left;"><a href="#%E5%9B%BA%E5%AE%9A%E8%A1%A8%E5%A4%B4">固定表头</a></td></tr><tr><td style="text-align:left;">show-loading</td><td style="text-align:left;"><code>boolean</code></td><td style="text-align:left;">false</td><td style="text-align:left;">可选，显示加载动画</td><td style="text-align:left;"><a href="#%E7%A9%BA%E6%95%B0%E6%8D%AE%E6%A8%A1%E6%9D%BF">空数据模板</a></td></tr><tr><td style="text-align:left;">header-bg</td><td style="text-align:left;"><code>boolean</code></td><td style="text-align:left;">false</td><td style="text-align:left;">可选，头部背景</td><td style="text-align:left;"><a href="#%E8%A1%A8%E6%A0%BC%E6%A0%B7%E5%BC%8F">表格样式</a></td></tr><tr><td style="text-align:left;">table-layout</td><td style="text-align:left;"><code>&#39;fixed&#39; | &#39;auto&#39;</code></td><td style="text-align:left;">&#39;fixed&#39;</td><td style="text-align:left;">可选，表格布局，可选值为&#39;auto&#39;</td><td style="text-align:left;"><a href="#%E8%A1%A8%E6%A0%BC%E6%A0%B7%E5%BC%8F">表格样式</a></td></tr><tr><td style="text-align:left;">span-method</td><td style="text-align:left;"><a href="#spanmethod">SpanMethod</a></td><td style="text-align:left;">--</td><td style="text-align:left;">可选，合并单元格的计算方法</td><td style="text-align:left;"><a href="#%E5%90%88%E5%B9%B6%E5%8D%95%E5%85%83%E6%A0%BC">合并单元格</a></td></tr><tr><td style="text-align:left;">border-type</td><td style="text-align:left;"><a href="#bordertype">BorderType</a></td><td style="text-align:left;">&#39;&#39;</td><td style="text-align:left;">可选，表格边框类型，默认有行边框；<code>bordered</code>: 全边框；<code>borderless</code>: 无边框</td><td style="text-align:left;"><a href="#%E8%A1%A8%E6%A0%BC%E6%A0%B7%E5%BC%8F">表格样式</a></td></tr><tr><td style="text-align:left;">empty</td><td style="text-align:left;"><code>string</code></td><td style="text-align:left;">&#39;No Data&#39;</td><td style="text-align:left;">可选，配置未传递表格数据时需要显示的空数据文本</td><td style="text-align:left;"><a href="#%E7%A9%BA%E6%95%B0%E6%8D%AE%E6%A8%A1%E6%9D%BF">空数据模板</a></td></tr><tr><td style="text-align:left;">show-header</td><td style="text-align:left;"><code>boolean</code></td><td style="text-align:left;">true</td><td style="text-align:left;">可选，配置是否显示表头</td><td style="text-align:left;"><a href="#%E8%A1%A8%E6%A0%BC%E6%A0%B7%E5%BC%8F">表格样式</a></td></tr><tr><td style="text-align:left;">row-key</td><td style="text-align:left;"><code>string | Function(item, index: number): string</code></td><td style="text-align:left;">--</td><td style="text-align:left;">可选，行数据的 Key，用来优化 Table 渲染，类型为 string 时，支持多层访问：<code>item.user.id</code>，但不支持 <code>item.user[0].id</code>，此种情况请使用 Function。</td><td style="text-align:left;"><a href="#%E8%A1%A8%E6%A0%BC%E4%BA%A4%E4%BA%92">表格交互(Function)</a> <br> <a href="#%E5%B1%95%E5%BC%80%E8%A1%8C">展开行(string)</a></td></tr><tr><td style="text-align:left;">indent</td><td style="text-align:left;"><code>number</code></td><td style="text-align:left;">16</td><td style="text-align:left;">可选，展示树形数据时，树节点的缩进</td><td style="text-align:left;"><a href="#%E6%A0%91%E5%BD%A2%E8%A1%A8%E6%A0%BC">树形表格</a></td></tr><tr><td style="text-align:left;">lazy</td><td style="text-align:left;"><code>boolean</code></td><td style="text-align:left;">false</td><td style="text-align:left;">可选，是否懒加载数据（搭配 loadMore 使用）</td><td style="text-align:left;"><a href="#%E6%87%92%E5%8A%A0%E8%BD%BD">懒加载</a></td></tr></tbody></table><h3 id="table-事件" tabindex="-1">Table 事件 <a class="header-anchor" href="#table-事件" aria-hidden="true">#</a></h3><table><thead><tr><th style="text-align:left;">事件名</th><th style="text-align:left;">回调参数</th><th style="text-align:left;">说明</th><th style="text-align:left;">跳转 Demo</th></tr></thead><tbody><tr><td style="text-align:left;">sort-change</td><td style="text-align:left;"><code>Function(obj: { field: string; direction: SortDirection })</code></td><td style="text-align:left;">排序回调事件，返回该列排序信息</td><td style="text-align:left;"><a href="#%E5%88%97%E6%8E%92%E5%BA%8F">列排序</a></td></tr><tr><td style="text-align:left;">cell-click</td><td style="text-align:left;"><code>Function(obj: CellClickArg)</code></td><td style="text-align:left;">单元格点击事件，返回单元格信息</td><td style="text-align:left;"><a href="#%E8%A1%A8%E6%A0%BC%E4%BA%A4%E4%BA%92">表格交互</a></td></tr><tr><td style="text-align:left;">check-change</td><td style="text-align:left;"><code>Function(checked: boolean, row, selection)</code></td><td style="text-align:left;">勾选表格行回调事件，返回该行信息和表格所有选中行数据</td><td style="text-align:left;"><a href="#%E8%A1%A8%E6%A0%BC%E4%BA%A4%E4%BA%92">表格交互</a></td></tr><tr><td style="text-align:left;">check-all-change</td><td style="text-align:left;"><code>Function(checked: boolean, selection)</code></td><td style="text-align:left;">全选表格行回调事件，返回勾选状态和表格所有选中行数据</td><td style="text-align:left;"><a href="#%E8%A1%A8%E6%A0%BC%E4%BA%A4%E4%BA%92">表格交互</a></td></tr><tr><td style="text-align:left;">row-click</td><td style="text-align:left;"><code>Function(obj: RowClickArg)</code></td><td style="text-align:left;">某一行被点击时触发该事件，返回该行信息</td><td style="text-align:left;"><a href="#%E8%A1%A8%E6%A0%BC%E4%BA%A4%E4%BA%92">表格交互</a></td></tr><tr><td style="text-align:left;">load-more</td><td style="text-align:left;"><code>Function()</code></td><td style="text-align:left;">滚动到表格底部触发懒加载事件（需配合 props.lazy 开启）</td><td style="text-align:left;"><a href="#%E6%87%92%E5%8A%A0%E8%BD%BD">懒加载</a></td></tr></tbody></table><h3 id="table-方法" tabindex="-1">Table 方法 <a class="header-anchor" href="#table-方法" aria-hidden="true">#</a></h3><table><thead><tr><th style="text-align:left;">方法名</th><th style="text-align:left;">类型</th><th style="text-align:left;">说明</th></tr></thead><tbody><tr><td style="text-align:left;">getCheckedRows</td><td style="text-align:left;"><code>() =&gt; []</code></td><td style="text-align:left;">获取当前选中的行数据</td></tr><tr><td style="text-align:left;">toggleRowExpansion</td><td style="text-align:left;"><code>(row, expended) =&gt; void</code></td><td style="text-align:left;">用于可展开的表格，切换某一行的展开状态。 如果使用了第二个参数，则是设置这一行是否展示（expended 为 true 则展开）</td></tr><tr><td style="text-align:left;">toggleRowSelection</td><td style="text-align:left;"><code>(row, checked) =&gt; void</code></td><td style="text-align:left;">用于可选择的表格，切换某一行的选中状态。 如果使用了第二个参数，则是设置这一行是否选中（checked 为 true 则选中）</td></tr><tr><td style="text-align:left;">setCellMode</td><td style="text-align:left;"><code>(row, rowIndex, field, cellMode) =&gt; void</code></td><td style="text-align:left;">用于可编辑单元格的表格，<code>cellMode</code>参数: <code>readonly</code>为只读状态， <code>edit</code>为编辑状态，单元格根据不同状态渲染不同内容</td></tr><tr><td style="text-align:left;">resetCellMode</td><td style="text-align:left;"><code>() =&gt; void</code></td><td style="text-align:left;">用于可编辑单元格的表格，重置所有可编辑单元格为只读状态</td></tr></tbody></table><h3 id="table-插槽" tabindex="-1">Table 插槽 <a class="header-anchor" href="#table-插槽" aria-hidden="true">#</a></h3><table><thead><tr><th style="text-align:left;">插槽名</th><th style="text-align:left;">说明</th><th style="text-align:left;">参数</th></tr></thead><tbody><tr><td style="text-align:left;">empty</td><td style="text-align:left;">配置未传递表格数据时需要显示的空数据模板</td><td style="text-align:left;"></td></tr></tbody></table><h3 id="column-参数" tabindex="-1">Column 参数 <a class="header-anchor" href="#column-参数" aria-hidden="true">#</a></h3><table><thead><tr><th style="text-align:left;">参数名</th><th style="text-align:left;">类型</th><th style="text-align:left;">默认值</th><th style="text-align:left;">说明</th><th style="text-align:left;">跳转 Demo</th></tr></thead><tbody><tr><td style="text-align:left;">header</td><td style="text-align:left;"><code>string</code></td><td style="text-align:left;">--</td><td style="text-align:left;">可选，对应列的标题</td><td style="text-align:left;"><a href="#%E5%9F%BA%E6%9C%AC%E7%94%A8%E6%B3%95">基本用法</a></td></tr><tr><td style="text-align:left;">field</td><td style="text-align:left;"><code>string</code></td><td style="text-align:left;">--</td><td style="text-align:left;">可选，对应列内容的字段名</td><td style="text-align:left;"><a href="#%E5%9F%BA%E6%9C%AC%E7%94%A8%E6%B3%95">基本用法</a></td></tr><tr><td style="text-align:left;">type</td><td style="text-align:left;"><a href="#columntype">ColumnType</a></td><td style="text-align:left;">&#39;&#39;</td><td style="text-align:left;">可选，列的类型，设置<code>checkable</code>会显示多选框</td><td style="text-align:left;"><a href="#%E8%A1%A8%E6%A0%BC%E4%BA%A4%E4%BA%92">表格交互</a></td></tr><tr><td style="text-align:left;">width</td><td style="text-align:left;"><code>string | number</code></td><td style="text-align:left;">--</td><td style="text-align:left;">可选，对应列的宽度，单位<code>px</code></td><td style="text-align:left;"></td></tr><tr><td style="text-align:left;">min-width</td><td style="text-align:left;"><code>string | number</code></td><td style="text-align:left;">--</td><td style="text-align:left;">可选，拖动调整宽度时的最小宽度，单位<code>px</code></td><td style="text-align:left;"></td></tr><tr><td style="text-align:left;">max-width</td><td style="text-align:left;"><code>string | number</code></td><td style="text-align:left;">--</td><td style="text-align:left;">可选，拖动调整宽度时的最大宽度，单位<code>px</code></td><td style="text-align:left;"></td></tr><tr><td style="text-align:left;">fixedLeft</td><td style="text-align:left;"><code>string</code></td><td style="text-align:left;">--</td><td style="text-align:left;">可选，该列固定到左侧的距离，如：&#39;100px&#39;</td><td style="text-align:left;"><a href="#%E5%9B%BA%E5%AE%9A%E5%88%97">固定列</a></td></tr><tr><td style="text-align:left;">fixedRight</td><td style="text-align:left;"><code>string</code></td><td style="text-align:left;">--</td><td style="text-align:left;">可选，该列固定到右侧的距离，如：&#39;100px&#39;</td><td style="text-align:left;"><a href="#%E5%9B%BA%E5%AE%9A%E5%88%97">固定列</a></td></tr><tr><td style="text-align:left;">formatter</td><td style="text-align:left;"><a href="#formatter">Formatter</a></td><td style="text-align:left;">--</td><td style="text-align:left;">可选，格式化列内容</td><td style="text-align:left;"></td></tr><tr><td style="text-align:left;">sortable</td><td style="text-align:left;"><code>boolean</code></td><td style="text-align:left;">false</td><td style="text-align:left;">可选，对行数据按照该列的顺序进行排序</td><td style="text-align:left;"><a href="#%E5%88%97%E6%8E%92%E5%BA%8F">列排序</a></td></tr><tr><td style="text-align:left;">sort-direction</td><td style="text-align:left;"><a href="#sortdirection">SortDirection</a></td><td style="text-align:left;">&#39;&#39;</td><td style="text-align:left;">可选，设置该列的排序状态</td><td style="text-align:left;"><a href="#%E5%88%97%E6%8E%92%E5%BA%8F">列排序</a></td></tr><tr><td style="text-align:left;">sort-method</td><td style="text-align:left;"><a href="#sortmethod">SortMethod</a></td><td style="text-align:left;">--</td><td style="text-align:left;">可选，用于排序的比较函数</td><td style="text-align:left;"><a href="#%E5%88%97%E6%8E%92%E5%BA%8F">列排序</a></td></tr><tr><td style="text-align:left;">filterable</td><td style="text-align:left;"><code>boolean</code></td><td style="text-align:left;">false</td><td style="text-align:left;">可选，是否对该列启用筛选功能</td><td style="text-align:left;"><a href="#%E5%88%97%E7%AD%9B%E9%80%89">列筛选</a></td></tr><tr><td style="text-align:left;">filter-multiple</td><td style="text-align:left;"><code>boolean</code></td><td style="text-align:left;">true</td><td style="text-align:left;">可选，是否启用多选的方式来筛选</td><td style="text-align:left;"><a href="#%E5%88%97%E7%AD%9B%E9%80%89">列筛选</a></td></tr><tr><td style="text-align:left;">filter-list</td><td style="text-align:left;"><a href="#filterconfig">FilterConfig[]</a></td><td style="text-align:left;">[]</td><td style="text-align:left;">可选，筛选列表</td><td style="text-align:left;"><a href="#%E5%88%97%E7%AD%9B%E9%80%89">列筛选</a></td></tr><tr><td style="text-align:left;">align</td><td style="text-align:left;"><a href="#columnalign">ColumnAlign</a></td><td style="text-align:left;">&#39;left&#39;</td><td style="text-align:left;">可选，配置水平对齐方式</td><td style="text-align:left;"><a href="#%E8%87%AA%E5%AE%9A%E4%B9%89%E5%88%97">自定义列</a></td></tr><tr><td style="text-align:left;">checkable</td><td style="text-align:left;"><code>Function(row, rowIndex): boolean</code></td><td style="text-align:left;">--</td><td style="text-align:left;">可选，配置行勾选状态</td><td style="text-align:left;"><a href="#%E8%A1%A8%E6%A0%BC%E4%BA%A4%E4%BA%92">表格交互</a></td></tr><tr><td style="text-align:left;">show-overflow-tooltip</td><td style="text-align:left;"><code>boolean</code></td><td style="text-align:left;">false</td><td style="text-align:left;">可选，内容过长被隐藏时是否显示 tooltip</td><td style="text-align:left;"></td></tr><tr><td style="text-align:left;">resizeable</td><td style="text-align:left;"><code>boolean</code></td><td style="text-align:left;">false</td><td style="text-align:left;">可选，该列宽度是否可调整</td><td style="text-align:left;"></td></tr><tr><td style="text-align:left;">reserve-check</td><td style="text-align:left;"><code>boolean</code></td><td style="text-align:left;">false</td><td style="text-align:left;">可选，是否保留勾选状态</td><td style="text-align:left;"><a href="#%E8%A1%A8%E6%A0%BC%E4%BA%A4%E4%BA%92">表格交互</a></td></tr><tr><td style="text-align:left;">cell-class</td><td style="text-align:left;"><code>string</code></td><td style="text-align:left;">&#39;&#39;</td><td style="text-align:left;">可选，该列单元格自定义 class</td><td style="text-align:left;"></td></tr></tbody></table><h3 id="column-事件" tabindex="-1">Column 事件 <a class="header-anchor" href="#column-事件" aria-hidden="true">#</a></h3><table><thead><tr><th style="text-align:left;">事件名</th><th style="text-align:left;">回调参数</th><th style="text-align:left;">说明</th><th style="text-align:left;">跳转 Demo</th></tr></thead><tbody><tr><td style="text-align:left;">filter-change</td><td style="text-align:left;"><code>Function(val: FilterConfig | FilterConfig[])</code></td><td style="text-align:left;">筛选回调事件，返回选中的筛选项或筛选项数组</td><td style="text-align:left;"><a href="#%E5%88%97%E7%AD%9B%E9%80%89">列筛选</a></td></tr><tr><td style="text-align:left;">resize-start</td><td style="text-align:left;"><code>Function()</code></td><td style="text-align:left;">该列宽度调整开始时的事件</td><td style="text-align:left;"><a href="#%E8%A1%A8%E6%A0%BC%E4%BA%A4%E4%BA%92">表格交互</a></td></tr><tr><td style="text-align:left;">resizing</td><td style="text-align:left;"><code>Function(val: {width: number})</code></td><td style="text-align:left;">该列宽度调整进行中的事件</td><td style="text-align:left;"><a href="#%E8%A1%A8%E6%A0%BC%E4%BA%A4%E4%BA%92">表格交互</a></td></tr><tr><td style="text-align:left;">resize-end</td><td style="text-align:left;"><code>Function(val: {width: number; beforeWidth: number})</code></td><td style="text-align:left;">该列宽度调整结束时的事件</td><td style="text-align:left;"><a href="#%E8%A1%A8%E6%A0%BC%E4%BA%A4%E4%BA%92">表格交互</a></td></tr></tbody></table><h3 id="column-插槽" tabindex="-1">Column 插槽 <a class="header-anchor" href="#column-插槽" aria-hidden="true">#</a></h3><table><thead><tr><th style="text-align:left;">插槽名</th><th style="text-align:left;">说明</th><th style="text-align:left;">参数</th></tr></thead><tbody><tr><td style="text-align:left;">default</td><td style="text-align:left;">默认插槽，自定义列内容</td><td style="text-align:left;"><code>{ row, rowIndex }</code></td></tr><tr><td style="text-align:left;">header</td><td style="text-align:left;">表头插槽，自定义表头内容</td><td style="text-align:left;"></td></tr><tr><td style="text-align:left;">cell</td><td style="text-align:left;">内容只读态插槽（配合可编辑单元格功能使用），自定义列内容</td><td style="text-align:left;"><code>{ row, rowIndex }</code></td></tr><tr><td style="text-align:left;">cellEdit</td><td style="text-align:left;">内容编辑态插槽（配合可编辑单元格功能使用），自定义列内容</td><td style="text-align:left;"><code>{ row, rowIndex }</code></td></tr></tbody></table><h3 id="table-类型定义" tabindex="-1">Table 类型定义 <a class="header-anchor" href="#table-类型定义" aria-hidden="true">#</a></h3><br><h4 id="tablesize" tabindex="-1">TableSize <a class="header-anchor" href="#tablesize" aria-hidden="true">#</a></h4><div class="language-typescript"><pre><code><span class="token keyword">type</span> <span class="token class-name">TableSize</span> <span class="token operator">=</span> <span class="token string">&#39;sm&#39;</span> <span class="token operator">|</span> <span class="token string">&#39;md&#39;</span> <span class="token operator">|</span> <span class="token string">&#39;lg&#39;</span><span class="token punctuation">;</span>
</code></pre></div><h4 id="spanmethod" tabindex="-1">SpanMethod <a class="header-anchor" href="#spanmethod" aria-hidden="true">#</a></h4><div class="language-typescript"><pre><code><span class="token keyword">type</span> <span class="token class-name">SpanMethod</span> <span class="token operator">=</span> <span class="token punctuation">(</span>data<span class="token operator">:</span> <span class="token punctuation">{</span>
  row<span class="token operator">:</span> <span class="token builtin">any</span><span class="token punctuation">;</span>
  column<span class="token operator">:</span> <span class="token builtin">any</span><span class="token punctuation">;</span>
  rowIndex<span class="token operator">:</span> <span class="token builtin">number</span><span class="token punctuation">;</span>
  columnIndex<span class="token operator">:</span> <span class="token builtin">number</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token builtin">number</span><span class="token punctuation">[</span><span class="token punctuation">]</span> <span class="token operator">|</span> <span class="token punctuation">{</span> rowspan<span class="token operator">:</span> <span class="token builtin">number</span><span class="token punctuation">;</span> colspan<span class="token operator">:</span> <span class="token builtin">number</span> <span class="token punctuation">}</span><span class="token punctuation">;</span>
</code></pre></div><h4 id="bordertype" tabindex="-1">BorderType <a class="header-anchor" href="#bordertype" aria-hidden="true">#</a></h4><div class="language-typescript"><pre><code><span class="token keyword">type</span> <span class="token class-name">BorderType</span> <span class="token operator">=</span> <span class="token string">&#39;&#39;</span> <span class="token operator">|</span> <span class="token string">&#39;bordered&#39;</span> <span class="token operator">|</span> <span class="token string">&#39;borderless&#39;</span><span class="token punctuation">;</span>
</code></pre></div><h4 id="cellclickarg" tabindex="-1">CellClickArg <a class="header-anchor" href="#cellclickarg" aria-hidden="true">#</a></h4><div class="language-ts"><pre><code><span class="token keyword">interface</span> <span class="token class-name">CellClickArg</span> <span class="token punctuation">{</span>
  columnIndex<span class="token operator">:</span> <span class="token builtin">number</span><span class="token punctuation">;</span>
  rowIndex<span class="token operator">:</span> <span class="token builtin">number</span><span class="token punctuation">;</span>
  column<span class="token operator">:</span> Column<span class="token punctuation">;</span>
  row<span class="token operator">:</span> DefaultRow<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><h4 id="rowclickarg" tabindex="-1">RowClickArg <a class="header-anchor" href="#rowclickarg" aria-hidden="true">#</a></h4><div class="language-ts"><pre><code><span class="token keyword">interface</span> <span class="token class-name">RowClickArg</span> <span class="token punctuation">{</span>
  row<span class="token operator">:</span> DefaultRow<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><h3 id="column-类型定义" tabindex="-1">Column 类型定义 <a class="header-anchor" href="#column-类型定义" aria-hidden="true">#</a></h3><br><h4 id="columntype" tabindex="-1">ColumnType <a class="header-anchor" href="#columntype" aria-hidden="true">#</a></h4><div class="language-ts"><pre><code><span class="token keyword">type</span> <span class="token class-name">ColumnType</span> <span class="token operator">=</span> <span class="token string">&#39;checkable&#39;</span> <span class="token operator">|</span> <span class="token string">&#39;index&#39;</span> <span class="token operator">|</span> <span class="token string">&#39;expand&#39;</span> <span class="token operator">|</span> <span class="token string">&#39;editable&#39;</span> <span class="token operator">|</span> <span class="token string">&#39;&#39;</span><span class="token punctuation">;</span>
</code></pre></div><h4 id="formatter" tabindex="-1">Formatter <a class="header-anchor" href="#formatter" aria-hidden="true">#</a></h4><div class="language-ts"><pre><code><span class="token keyword">type</span> <span class="token class-name">Formatter</span> <span class="token operator">=</span> <span class="token punctuation">(</span>row<span class="token operator">:</span> <span class="token builtin">any</span><span class="token punctuation">,</span> column<span class="token operator">:</span> <span class="token builtin">any</span><span class="token punctuation">,</span> cellValue<span class="token operator">:</span> <span class="token builtin">any</span><span class="token punctuation">,</span> rowIndex<span class="token operator">:</span> <span class="token builtin">number</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> VNode<span class="token punctuation">;</span>
</code></pre></div><h4 id="sortdirection" tabindex="-1">SortDirection <a class="header-anchor" href="#sortdirection" aria-hidden="true">#</a></h4><div class="language-ts"><pre><code><span class="token keyword">type</span> <span class="token class-name">SortDirection</span> <span class="token operator">=</span> <span class="token string">&#39;ASC&#39;</span> <span class="token operator">|</span> <span class="token string">&#39;DESC&#39;</span> <span class="token operator">|</span> <span class="token string">&#39;&#39;</span><span class="token punctuation">;</span>
</code></pre></div><h4 id="sortmethod" tabindex="-1">SortMethod <a class="header-anchor" href="#sortmethod" aria-hidden="true">#</a></h4><div class="language-ts"><pre><code><span class="token keyword">type</span> <span class="token class-name">SortMethod<span class="token operator">&lt;</span><span class="token constant">T</span> <span class="token operator">=</span> <span class="token builtin">any</span><span class="token operator">&gt;</span></span> <span class="token operator">=</span> <span class="token punctuation">(</span>a<span class="token operator">:</span> <span class="token constant">T</span><span class="token punctuation">,</span> b<span class="token operator">:</span> <span class="token constant">T</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token builtin">boolean</span><span class="token punctuation">;</span>
</code></pre></div><h4 id="filterconfig" tabindex="-1">FilterConfig <a class="header-anchor" href="#filterconfig" aria-hidden="true">#</a></h4><div class="language-ts"><pre><code><span class="token keyword">interface</span> <span class="token class-name">FilterConfig</span> <span class="token punctuation">{</span>
  name<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">;</span>
  value<span class="token operator">:</span> <span class="token builtin">any</span><span class="token punctuation">;</span>
  checked<span class="token operator">?</span><span class="token operator">:</span> <span class="token builtin">boolean</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><h4 id="columnalign" tabindex="-1">ColumnAlign <a class="header-anchor" href="#columnalign" aria-hidden="true">#</a></h4><div class="language-ts"><pre><code><span class="token keyword">type</span> <span class="token class-name">ColumnAlign</span> <span class="token operator">=</span> <span class="token string">&#39;left&#39;</span> <span class="token operator">|</span> <span class="token string">&#39;center&#39;</span> <span class="token operator">|</span> <span class="token string">&#39;right&#39;</span><span class="token punctuation">;</span>
</code></pre></div></div></div><div data-v-35e0cb6b><div class="page-contributor-label" data-v-35e0cb6b>Contributors</div><div class="page-contributor" data-v-35e0cb6b data-v-36223ac2><!--[--><a href="https://github.com/Zcating" target="_blank" data-v-36223ac2><span class="devui-avatar contributor-avatar" style="margin-right:8px;margin-bottom:4px;" data-v-36223ac2><img src="https://avatars.githubusercontent.com/u/13329558?v=4" alt style="height:36px;width:36px;border-radius:100%;"><!----><!----><!----></span></a><a href="https://github.com/ivestszheng" target="_blank" data-v-36223ac2><span class="devui-avatar contributor-avatar" style="margin-right:8px;margin-bottom:4px;" data-v-36223ac2><img src="https://avatars.githubusercontent.com/u/70649502?v=4" alt style="height:36px;width:36px;border-radius:100%;"><!----><!----><!----></span></a><a href="https://github.com/xingyan95" target="_blank" data-v-36223ac2><span class="devui-avatar contributor-avatar" style="margin-right:8px;margin-bottom:4px;" data-v-36223ac2><img src="https://avatars.githubusercontent.com/u/11143986?v=4" alt style="height:36px;width:36px;border-radius:100%;"><!----><!----><!----></span></a><a href="https://github.com/kagol" target="_blank" data-v-36223ac2><span class="devui-avatar contributor-avatar" style="margin-right:8px;margin-bottom:4px;" data-v-36223ac2><img src="https://avatars.githubusercontent.com/u/9566362?v=4" alt style="height:36px;width:36px;border-radius:100%;"><!----><!----><!----></span></a><a href="https://github.com/xzxldl55" target="_blank" data-v-36223ac2><span class="devui-avatar contributor-avatar" style="margin-right:8px;margin-bottom:4px;" data-v-36223ac2><img src="https://avatars.githubusercontent.com/u/22699218?v=4" alt style="height:36px;width:36px;border-radius:100%;"><!----><!----><!----></span></a><a href="https://github.com/linxiang07" target="_blank" data-v-36223ac2><span class="devui-avatar contributor-avatar" style="margin-right:8px;margin-bottom:4px;" data-v-36223ac2><img src="https://avatars.githubusercontent.com/u/40119767?v=4" alt style="height:36px;width:36px;border-radius:100%;"><!----><!----><!----></span></a><a href="https://github.com/TerminatorSd" target="_blank" data-v-36223ac2><span class="devui-avatar contributor-avatar" style="margin-right:8px;margin-bottom:4px;" data-v-36223ac2><img src="https://avatars.githubusercontent.com/u/22176126?v=4" alt style="height:36px;width:36px;border-radius:100%;"><!----><!----><!----></span></a><!--]--></div></div><footer class="page-footer" data-v-35e0cb6b data-v-63a8fcc6><div class="edit" data-v-63a8fcc6><div class="edit-link" data-v-63a8fcc6 data-v-084d37fe><!----></div></div><div class="updated" data-v-63a8fcc6><!----></div></footer><div class="next-and-prev-link" data-v-35e0cb6b data-v-1443c067><div class="container" data-v-1443c067><div class="prev" data-v-1443c067><a class="link" href="/components/steps/" data-v-1443c067><svg t="1637469990202" class="icon icon icon-prev" viewbox="0 0 1056 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5081" width="16" height="16" data-v-1443c067><path d="M277.92 512.064c0 8.128 3.072 16.224 9.28 22.4l362.336 362.336a31.808 31.808 0 0 0 45.12-0.128 31.904 31.904 0 0 0 0.128-45.12L355.2 512 694.72 172.448a31.808 31.808 0 0 0-0.128-45.12 31.904 31.904 0 0 0-45.12-0.128L287.232 489.536a31.616 31.616 0 0 0-9.312 22.4l0.032 0.128z" fill="var(--devui-brand, #5e7ce0)" p-id="5082"></path></svg><span class="text" data-v-1443c067>Steps 步骤条</span></a></div><div class="next" data-v-1443c067><a class="link" href="/components/tag/" data-v-1443c067><span class="text" data-v-1443c067>Tag 标签</span><svg t="1637469947735" class="icon icon icon-next" viewbox="0 0 1056 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4917" width="16" height="16" data-v-1443c067><path d="M746.08 512.064a31.584 31.584 0 0 1-9.28 22.4L374.464 896.8a31.808 31.808 0 0 1-45.12-0.128 31.904 31.904 0 0 1-0.128-45.12L668.8 512 329.28 172.448a31.808 31.808 0 0 1 0.128-45.12 31.904 31.904 0 0 1 45.12-0.128l362.304 362.336c6.208 6.176 9.28 14.272 9.312 22.4l-0.032 0.128z" fill="var(--devui-brand, #5e7ce0)" p-id="4918"></path></svg></a></div></div></div><!--[--><!--]--><!----><aside class="toc-warpper" data-v-35e0cb6b data-v-38776bfe><nav class="devui-content-nav" data-v-38776bfe><h3 class="devui-fast-forward" data-v-38776bfe>快速前往</h3><ul class="devui-step-nav" data-v-38776bfe><!--[--><li class="devui-item" data-v-38776bfe><a class="devui-link" href="#基本用法" title="基本用法" data-v-38776bfe>基本用法</a></li><li class="devui-item" data-v-38776bfe><a class="devui-link" href="#表格样式" title="表格样式" data-v-38776bfe>表格样式</a></li><li class="devui-item" data-v-38776bfe><a class="devui-link" href="#表格交互" title="表格交互" data-v-38776bfe>表格交互</a></li><li class="devui-item" data-v-38776bfe><a class="devui-link" href="#索引列" title="索引列" data-v-38776bfe>索引列</a></li><li class="devui-item" data-v-38776bfe><a class="devui-link" href="#自定义列" title="自定义列" data-v-38776bfe>自定义列</a></li><li class="devui-item" data-v-38776bfe><a class="devui-link" href="#编辑单元格" title="编辑单元格" data-v-38776bfe>编辑单元格</a></li><li class="devui-item" data-v-38776bfe><a class="devui-link" href="#自定义表头" title="自定义表头" data-v-38776bfe>自定义表头</a></li><li class="devui-item" data-v-38776bfe><a class="devui-link" href="#空数据模板" title="空数据模板" data-v-38776bfe>空数据模板</a></li><li class="devui-item" data-v-38776bfe><a class="devui-link" href="#固定表头" title="固定表头" data-v-38776bfe>固定表头</a></li><li class="devui-item" data-v-38776bfe><a class="devui-link" href="#固定列" title="固定列" data-v-38776bfe>固定列</a></li><li class="devui-item" data-v-38776bfe><a class="devui-link" href="#合并单元格" title="合并单元格" data-v-38776bfe>合并单元格</a></li><li class="devui-item" data-v-38776bfe><a class="devui-link" href="#表头分组" title="表头分组" data-v-38776bfe>表头分组</a></li><li class="devui-item" data-v-38776bfe><a class="devui-link" href="#列排序" title="列排序" data-v-38776bfe>列排序</a></li><li class="devui-item" data-v-38776bfe><a class="devui-link" href="#列筛选" title="列筛选" data-v-38776bfe>列筛选</a></li><li class="devui-item" data-v-38776bfe><a class="devui-link" href="#展开行" title="展开行" data-v-38776bfe>展开行</a></li><li class="devui-item" data-v-38776bfe><a class="devui-link" href="#树形表格" title="树形表格" data-v-38776bfe>树形表格</a></li><li class="devui-item" data-v-38776bfe><a class="devui-link" href="#懒加载" title="懒加载" data-v-38776bfe>懒加载</a></li><li class="devui-item" data-v-38776bfe><a class="devui-link" href="#table-参数" title="Table 参数" data-v-38776bfe>Table 参数</a></li><li class="devui-item" data-v-38776bfe><a class="devui-link" href="#table-事件" title="Table 事件" data-v-38776bfe>Table 事件</a></li><li class="devui-item" data-v-38776bfe><a class="devui-link" href="#table-方法" title="Table 方法" data-v-38776bfe>Table 方法</a></li><li class="devui-item" data-v-38776bfe><a class="devui-link" href="#table-插槽" title="Table 插槽" data-v-38776bfe>Table 插槽</a></li><li class="devui-item" data-v-38776bfe><a class="devui-link" href="#column-参数" title="Column 参数" data-v-38776bfe>Column 参数</a></li><li class="devui-item" data-v-38776bfe><a class="devui-link" href="#column-事件" title="Column 事件" data-v-38776bfe>Column 事件</a></li><li class="devui-item" data-v-38776bfe><a class="devui-link" href="#column-插槽" title="Column 插槽" data-v-38776bfe>Column 插槽</a></li><li class="devui-item" data-v-38776bfe><a class="devui-link" href="#table-类型定义" title="Table 类型定义" data-v-38776bfe>Table 类型定义</a></li><li class="devui-item" data-v-38776bfe><a class="devui-link" href="#column-类型定义" title="Column 类型定义" data-v-38776bfe>Column 类型定义</a></li><!--]--></ul><div class="devui-marker" data-v-38776bfe></div></nav></aside></div></main></div><!----><!----><!----><!--]--></div>
    <script>__VP_HASH_MAP__ = JSON.parse("{\"components_accordion_index.md\":\"a92e3443\",\"components_alert_index.md\":\"c7702e03\",\"components_anchor_index.md\":\"f7333cbb\",\"components_auto-complete_index.md\":\"4de98e8d\",\"components_avatar_index.md\":\"69aa04d5\",\"components_back-top_index.md\":\"d1ab787c\",\"components_badge_index.md\":\"e4750848\",\"components_breadcrumb_index.md\":\"c976c02b\",\"components_button_index.md\":\"5ad2976d\",\"components_card_index.md\":\"07ffbefa\",\"components_carousel_index.md\":\"f88f0b13\",\"components_cascader_index.md\":\"ee34cce7\",\"components_checkbox_index.md\":\"3ec7d7a1\",\"components_collapse_index.md\":\"9f2cbd98\",\"components_color-picker_index.md\":\"76658b37\",\"components_comment_index.md\":\"7f6ae658\",\"components_countdown_index.md\":\"556b68b1\",\"components_date-picker-pro_index.md\":\"a354c050\",\"components_date-picker_index.md\":\"00801143\",\"components_dragdrop_index.md\":\"27ca48b1\",\"components_drawer_index.md\":\"f1f95db0\",\"components_dropdown_index.md\":\"2e85d37e\",\"components_editable-select_index.md\":\"dfceeabe\",\"components_form_index.md\":\"aa7415f4\",\"components_fullscreen_index.md\":\"91a2fd77\",\"components_gantt_index.md\":\"c7536435\",\"components_grid_index.md\":\"646531b7\",\"components_icon_index.md\":\"b13a05fb\",\"components_image-preview_index.md\":\"6064aa0f\",\"components_input-icon_index.md\":\"03605b44\",\"components_input-number_index.md\":\"75cb181b\",\"components_input_index.md\":\"399db2a5\",\"components_layout_index.md\":\"bd89a2a7\",\"components_list_index.md\":\"398a7889\",\"components_loading_index.md\":\"86c25c88\",\"components_mention_index.md\":\"4e5fcead\",\"components_menu_index.md\":\"5e7b2a2a\",\"components_message_index.md\":\"288b49b1\",\"components_modal_index.md\":\"6d985802\",\"components_multi-auto-complete_index.md\":\"d7dd7812\",\"components_nav-sprite_index.md\":\"59326b1c\",\"components_notification_index.md\":\"17d66bf4\",\"components_overlay_index.md\":\"b3c2d8b1\",\"components_overview_index.md\":\"4f4893a2\",\"components_pagination_index.md\":\"fa43e1ee\",\"components_panel_index.md\":\"78140495\",\"components_popover_index.md\":\"e061fad6\",\"components_progress_index.md\":\"f99bb298\",\"components_quadrant-diagram_index.md\":\"5b863b4f\",\"components_radio_index.md\":\"1569e619\",\"components_rate_index.md\":\"8ed5b018\",\"components_read-tip_index.md\":\"65f3a3e8\",\"components_result_index.md\":\"5a0e2c71\",\"components_ripple_index.md\":\"e22eb85c\",\"components_search_index.md\":\"a6ca9673\",\"components_select_index.md\":\"14f5b72d\",\"components_skeleton_index.md\":\"87cfbcd2\",\"components_slider_index.md\":\"c3e69a49\",\"components_splitter_index.md\":\"7b49b977\",\"components_statistic_index.md\":\"699289db\",\"components_status_index.md\":\"9b3ee9c1\",\"components_steps-guide_index.md\":\"4d707f63\",\"components_steps_index.md\":\"75686d75\",\"components_sticky_index.md\":\"839717a7\",\"components_switch_index.md\":\"05eb9888\",\"components_table_index.md\":\"1b34dab5\",\"components_tabs_index.md\":\"2612fccc\",\"components_tag-input_index.md\":\"d6c90326\",\"components_tag_index.md\":\"9d46f105\",\"components_textarea_index.md\":\"f6a86e66\",\"components_time-picker_index.md\":\"f8cff83c\",\"components_time-select_index.md\":\"38dfaf50\",\"components_timeline_index.md\":\"9b7ebcb4\",\"components_tooltip_index.md\":\"f9f4b384\",\"components_transfer_index.md\":\"7005ca26\",\"components_tree-select_index.md\":\"d122e78e\",\"components_tree_index.md\":\"2611f2c7\",\"components_upload_index.md\":\"65171bcd\",\"components_virtual-list_index.md\":\"6c90a3dd\",\"contributing_development-specification_api-demo-design_index.md\":\"fc9f2d3e\",\"contributing_development-specification_coding-specification_index.md\":\"af51d196\",\"contributing_development-specification_component-document_index.md\":\"a849b30c\",\"contributing_development-specification_directory-organization_index.md\":\"58197a6f\",\"contributing_development-specification_index.md\":\"1df9cfa5\",\"contributing_index.md\":\"7660b0ff\",\"en-us_components_alert_index.md\":\"96d493c1\",\"en-us_components_auto-complete_api-en.md\":\"004a35e9\",\"en-us_components_avatar_index.md\":\"dbe38f1a\",\"en-us_components_badge_index.md\":\"e48f2672\",\"en-us_components_button_index.md\":\"ec772540\",\"en-us_components_carousel_index.md\":\"3fec7a3f\",\"en-us_components_color-picker_index.md\":\"9fe5a01c\",\"en-us_components_comment_index.md\":\"2a0696ba\",\"en-us_components_editable-select_index.md\":\"73d1175f\",\"en-us_components_form_index.md\":\"65caae2d\",\"en-us_components_input_index.md\":\"136ae80e\",\"en-us_components_menu_index.md\":\"0bb24150\",\"en-us_components_message_index.md\":\"3fa5c7c8\",\"en-us_components_modal_index.md\":\"736ef31f\",\"en-us_components_panel_index.md\":\"4a1db166\",\"en-us_components_popover_index.md\":\"6b07f22f\",\"en-us_components_progress_index.md\":\"b364f914\",\"en-us_components_radio_index.md\":\"bddcefa7\",\"en-us_components_rate_index.md\":\"3940452b\",\"en-us_components_read-tip_index.md\":\"56a74b67\",\"en-us_components_result_index.md\":\"369abc51\",\"en-us_components_ripple_index.md\":\"b6d519cb\",\"en-us_components_search_index.md\":\"8745e3f6\",\"en-us_components_skeleton_index.md\":\"73d6ba05\",\"en-us_components_slider_index.md\":\"d6b0ecd3\",\"en-us_components_splitter_index.md\":\"ae397e5b\",\"en-us_components_statistic_index.md\":\"6f27cda4\",\"en-us_components_status_index.md\":\"e80d4793\",\"en-us_components_tag_index.md\":\"2388e235\",\"en-us_components_tooltip_index.md\":\"6013670f\",\"en-us_index.md\":\"45997edd\",\"en-us_quick-start_index.md\":\"5cb0ca76\",\"index.md\":\"d8afff32\",\"on-demand_index.md\":\"cc889f91\",\"quick-start_index.md\":\"2f52f012\",\"theme-guide_index.md\":\"4b58afef\"}")</script>
    <script type="module" async src="/assets/app.43ba01c1.js"></script>
    
  </body>
</html>